|
今天做网页的时候刚发现的问题,在一句话中加入h1标签或者h2、h3等,如下:
% ?# c7 H: t. g" |% G: ?. Y% I 不<h1>自动</h1>换行 9 b9 Z) s2 }6 H! x
显示的时候会是这个样子: $ N \ s: f' O# M$ ~: [6 r) \4 c
不
% O( k: j9 ~+ k& {! m; o自动
) J* W: a( @" K换行
7 C5 x0 L+ a {5 H" _会在h1标签处分为三行,如何让他不分为三行呢,只需在css中定义h1{display:inline;}然后就OK了。
# `; m& Q, z8 G2 ` 9 [# W8 @9 E) ^' B; m6 q
以下是display的用法和定义: 7 N) H9 U& V% U) c( f& g
* ]- D' x% O7 g! N
) K3 ~; u8 }8 q( r8 f- S4 F. n3 U定义和用法6 T, L" y; w* A! L2 y/ U
display 属性规定元素应该生成的框的类型。 4 h. p- z* m. Q: ]/ \( T7 m
说明3 }1 \7 n/ N. W K
这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML 没有内置的这种层次结构,所有 display 是绝对必要的。 # [8 Q9 F! X; k8 n( @$ I
注释:CSS2 中有值 compact 和 marker,不过由于缺乏广泛的支持,已经从 CSS2.1 中去除了。 4 i. `( t, o6 v- M/ J, i* E
8 {7 L9 A& [3 F; Q+ p
2 J9 j" T$ D! D3 C6 s8 V* B
. U: d( p1 j: _; }4 V( g| 默认值: |
/ Y7 R( U3 b" q7 k" W& Kinline |
( h6 u" X$ v6 N
5 C+ r# l5 i* h6 z| 继承性: | ' R8 k" T+ F% `) E; v" F5 T1 v4 |7 a
no | $ t1 i9 C( D! @8 c
Z y8 R* R+ }9 _+ b/ O1 O8 x5 b
| 版本: |
- M' o8 Z! @! zCSS1 | 5 w6 Y3 F) ~6 p+ N3 p8 m: e
4 n+ i7 q, ~. H: i% ^| JavaScript 语法: |
- E8 a; u' u0 u) [& Robject.style.display="inline" | & ?4 q" C/ O& f8 a) F5 M. I2 g: V
1 v* M( y8 O# x& p/ _
实例
" P8 {% G. i( `6 w3 |8 X2 l& I7 Q使段落生出行内框: p.inline9 k# p0 B4 H2 Y: L6 g
{9 ^% _5 U3 R) U9 Y) h6 U4 O7 i
display:inline;" A& S' t$ s9 F! e9 ~: I
}
/ t: o# ~7 g, a& F$ n
4 L/ L* E o# O2 Y6 [7 I9 Y/ W浏览器支持. W) r( r+ r1 Y- l. M3 }
所有主流浏览器都支持 display 属性。
1 f5 Y/ l: I# q, }; t$ {3 a注释:如果规定了 !DOCTYPE,则 Internet Explorer 8 (以及更高版本)支持属性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及 "inherit"。
7 O9 d3 x& X- y7 P. b* D
: x3 B- k: @1 z6 R% O3 v% ~- ]& x可能的值% W/ H+ p0 v/ q
* c( U7 c% v: K5 i$ K1 u/ A# U
( @- q: t+ ~* P, a
& E% F- H1 V {" o$ r n| 值 | : a+ K8 ]5 h% i w0 `% F, _4 M
描述 |
! q8 x9 ~: F! M+ M9 `$ k& q( T& t8 e
7 e4 }2 R9 ~, \: k8 S- E| none |
! ], V, i6 s G/ L8 w此元素不会被显示。 |
% \4 E! L) K9 f1 ^0 {
, O( M, h8 F; z| block | % P7 B, f9 ?" y- b! c+ J% W
此元素将显示为块级元素,此元素前后会带有换行符。 | . k2 X$ y9 u6 w$ ~+ u5 w
. ]0 f# `3 d- U| inline |
3 u7 N6 v) s1 U W2 f* M9 B默认。此元素会被显示为内联元素,元素前后没有换行符。 |
9 x; ~1 F) u+ }8 Z' N- S1 I8 T+ D+ y, k6 | o
| inline-block | % m9 }: A9 M/ L9 H) X
行内块元素。(CSS2.1 新增的值) |
9 e( ^* v0 u1 t& m$ ?. C; K
1 j) a% k1 D! p2 D7 W| list-item | 6 s' E6 A' R6 \& Y6 X& a; c
此元素会作为列表显示。 |
- c$ D( [& D2 n
' z1 p- `: N1 f+ v| run-in |
! x- \: @6 q* N% G5 ^此元素会根据上下文作为块级元素或内联元素显示。 |
! z, W8 k! a. E+ F/ l* L6 ^4 s2 i; l9 Q# W% b! t
| compact | ) p* w8 c$ m7 Y8 I
CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 |
/ s7 F& b9 V: L3 O- i; r' I/ @* E5 I2 e! \" h; j8 F V
| marker | 5 {3 `* X( Q2 N6 j
CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 |
. E) {( s- S4 q. @+ P( D
/ m& K D2 o; E| table | 6 {, t2 Y, _- q9 v3 ?
此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。 | ; `0 X. f1 v4 j: {8 s
* w! \- C; ] q" D6 Z% \0 N| inline-table |
% z/ h, C: ]" r. K( v+ k此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。 | 3 X! ^% B* X: I% V' {* A
! l9 G* g' i, l7 t K/ [' a
| table-row-group | : p2 m6 l) f: z9 D4 A9 h. H
此元素会作为一个或多个行的分组来显示(类似 <tbody>)。 |
* a1 g' c. W; J' ^2 d4 q$ k) R1 W
: ? s0 `# W, a0 r X+ @# {| table-header-group | ' s% a" V% F) b& n. s. ]; P( ?. v
此元素会作为一个或多个行的分组来显示(类似 <thead>)。 | 6 ]8 J$ o; V; `3 J0 J
% M! M8 S9 b& S- z- p
| table-footer-group |
' R0 z$ x. O( O3 s4 l$ M* i9 k& D此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。 |
% U* W Q; O9 v- E/ x0 A9 w8 p3 ?! E: `8 |0 _8 w+ }3 c3 r2 {
| table-row |
, w5 |& b; _( e0 ^: q* Y, t此元素会作为一个表格行显示(类似 <tr>)。 | 1 V7 \2 r" c) k3 r- Z! R' K
+ K6 r1 l, \) s5 E' {8 f \' ]| table-column-group | : z& P2 t1 m( h" k
此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。 | $ t W* Z% P, o+ U
# D: Q5 X' I+ Y| table-column | " Y- W( }# A& N2 Z: b9 ~
此元素会作为一个单元格列显示(类似 <col>) | + U! b' @- k! f6 ~6 L! _
- W+ ?* K5 J/ N4 @6 b% H
| table-cell | # t, q4 V, M! D+ [0 A5 {
此元素会作为一个表格单元格显示(类似 <td> 和 <th>) | : u( m3 W2 V/ c4 [* g$ O! C
- T6 i) v! l `1 o* e( X3 U7 v
| table-caption | % q( ]6 U- B! h8 B, Q4 Y/ }
此元素会作为一个表格标题显示(类似 <caption>) |
4 x7 K- W: |$ L- F
& l' i% z( o2 C8 U, j! c8 e- i| inherit | ( K+ x$ ^9 _% `6 h# l% a( l
规定应该从父元素继承 display 属性的值。 | |