今天做网页的时候刚发现的问题,在一句话中加入h1标签或者h2、h3等,如下: 1 @3 f! f( W4 p
不<h1>自动</h1>换行
7 S" i- R7 F" I8 z8 D 显示的时候会是这个样子:
& G3 I0 p* U4 G/ W不
+ G2 t. v8 W( {# M4 [自动 H0 |5 _ v1 R" {0 ~8 {$ Q
换行 5 n$ H8 f5 p# B2 p4 A
会在h1标签处分为三行,如何让他不分为三行呢,只需在css中定义h1{display:inline;}然后就OK了。 0 v% k8 @: z( z: Z/ h( R
# v$ j, N1 x4 `3 Z3 t以下是display的用法和定义: * Z8 v/ o/ v' [1 a6 a
9 t3 B1 z$ E0 J( Q5 F% M. _8 J2 t' L; K R6 |: w
定义和用法
, [5 j7 m1 B6 U% s' E! @display 属性规定元素应该生成的框的类型。
9 _ _8 g0 I2 y说明' h: {4 C$ e3 O+ P ~! \
这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML 没有内置的这种层次结构,所有 display 是绝对必要的。 ' a- M% Q. M7 }% G" D) Q
注释:CSS2 中有值 compact 和 marker,不过由于缺乏广泛的支持,已经从 CSS2.1 中去除了。 0 C7 F v6 v9 ?$ R ^" Q
?+ S$ V7 E: M7 c9 S4 {7 ]' i
; @* H1 g6 @* q" j+ }
: G6 k( L) C" a/ ^* K7 n0 @默认值: | " z: w& ?4 ]7 k) Y& X/ e9 @
inline | - t7 o; ~/ ^( n$ }
4 y& a: | ^2 A" L
继承性: |
6 a1 H6 Y( Z. Y! P5 ?6 fno |
, q* Z/ f2 {7 D4 P3 j
" j+ n! w. L3 G: m# w' z5 a* ]版本: |
8 a& w8 s* b: @) k6 RCSS1 |
9 y, E: R2 Q% Z: O# G& o9 i) g8 E8 _: R/ Y/ ^
JavaScript 语法: |
: c* W8 f) e1 F& Wobject.style.display="inline" | , v+ I0 c/ m/ O1 D! E
! N2 s5 Z: |! x/ V实例
8 B& K3 }/ T b9 @使段落生出行内框: p.inline: D3 b y) r, Y3 b
{! B( F' V5 `2 Z
display:inline;
( [& m8 R% q3 j; T! z* d/ B5 F }
- I3 G* Q( t3 Z% |' S, J' @/ ^) a' v2 f! r% z
: l: M: z. g' I& w浏览器支持
) z! t; q, r8 x1 v- u所有主流浏览器都支持 display 属性。 " S/ ^, w5 V' S& l/ j6 `. e5 O2 l
注释:如果规定了 !DOCTYPE,则 Internet Explorer 8 (以及更高版本)支持属性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及 "inherit"。
, S. H$ `6 b4 N+ W- L- e
$ v8 _* U6 A }% M可能的值
2 S* E/ ^" ?" L9 B- F
" v/ A! t. J2 X, r) @7 `# g. c1 t$ s( V5 L, A# q) f( k0 y
5 G2 G+ q" u c! p; ~5 f: Y# M值 | ! v0 w. f9 H, q X) o7 r
描述 |
" a( U/ Y& n% b$ j6 X5 s3 ~4 `
( |3 J4 ]8 w7 o" Unone | % {# i) d2 F; @0 K! b
此元素不会被显示。 | 3 p+ b5 Q( m/ T8 A; l, n1 J
+ p, w. z6 f) {9 o
block | 2 Q# j: B/ v& v# u; }+ V
此元素将显示为块级元素,此元素前后会带有换行符。 |
1 y4 [2 J K8 P3 |4 E. D( z& }! b- A7 b
inline | 3 l3 a& x, D/ s' q
默认。此元素会被显示为内联元素,元素前后没有换行符。 | ' v. L6 c/ }/ Z0 M! O2 V- R' N" w
( Q* j+ Q4 k3 k9 Y5 V% U F
inline-block | / e4 k8 V. m5 Q0 M, s" M. [
行内块元素。(CSS2.1 新增的值) |
* h) h, N" t7 q8 e: Q
9 v% L$ j u. J% M4 X, flist-item | . s& ^% U5 k! l- p
此元素会作为列表显示。 |
5 V( l" A. }* U$ X: e0 U5 R I
3 W+ \2 \8 u( H9 ?) p# @4 [run-in |
8 g, L" h$ _' U( M: L9 ?( h此元素会根据上下文作为块级元素或内联元素显示。 | ; A& S# h% O3 \& a" k& j
3 O7 e* j1 y6 F) l/ `
compact |
9 \# W/ d. w' C! k& ~CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 | ( n& f& q* A" f4 i/ y: N
. O) A- L2 \) n; Y" }& h5 N) omarker |
9 l# P) q$ L$ D+ `CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 | M7 S. n6 Z3 `* L* I
, K) S' f3 }" T- v- H
table | - @! T6 f6 S( a: S
此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。 | 4 l8 [1 `0 C6 @
9 L2 b9 Z6 s) h2 s: ~9 J+ Yinline-table | # J5 f! D3 Y2 J# N( @* V0 z# n$ @% h
此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。 | & _" \" v3 l# @" L( T; k/ [- i1 W( Q
: B; f2 K6 S. n
table-row-group |
5 [! ~, Z- S- z8 K此元素会作为一个或多个行的分组来显示(类似 <tbody>)。 | 2 X, G# z+ H: y' R& o6 _: A3 z
6 h, S7 ]8 f: s/ H% ]
table-header-group |
; }/ v( J) i8 x# c8 r0 M: v此元素会作为一个或多个行的分组来显示(类似 <thead>)。 | 5 ^$ V2 Z8 F% a- q
0 e: y8 g3 i7 }+ f; Vtable-footer-group |
8 s( r" n' T+ t O% y此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。 | ; C" A2 B3 T# P. k( e" t8 r
, m/ ?2 E j0 C6 Itable-row | ) r3 X W& Z% I# ]% w
此元素会作为一个表格行显示(类似 <tr>)。 | + a' X- N2 G* s& v% a; [
; j' N& }1 S( Q2 Ztable-column-group |
% e- A8 r4 ~1 y- ^" N4 G: L此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。 | * Y! H) b1 H2 _' P8 P8 N3 z5 V. _
3 A' h* h+ ~5 I) @% f. G- H: Qtable-column |
8 c4 @, A3 s# I; n, T4 z/ t; I此元素会作为一个单元格列显示(类似 <col>) | 0 q3 o2 w. i! u9 g9 g
- Q( h1 M8 G& d% p" q4 k2 g( L6 jtable-cell | " `; |: H. j2 ?- s
此元素会作为一个表格单元格显示(类似 <td> 和 <th>) |
8 a! M7 t4 n6 Q6 }0 w0 c
: l1 H- F5 K" R$ |% ytable-caption | # Z4 K2 b7 w+ X, y8 F2 f
此元素会作为一个表格标题显示(类似 <caption>) |
4 Z" M9 k6 F" H7 M; a9 E% A
6 W) h$ ]& y+ l+ Z3 V! E* Dinherit | c) }& g. \. M
规定应该从父元素继承 display 属性的值。 | |