|
今天做网页的时候刚发现的问题,在一句话中加入h1标签或者h2、h3等,如下: 3 k* g+ S! [ I2 R$ r* C
不<h1>自动</h1>换行 7 S* }, _7 n. N! B9 }& W4 h2 P
显示的时候会是这个样子: 9 W3 G) I0 D4 o) m# y
不
9 ^4 M9 z; Q, c" x! k自动 8 \6 R8 K" f: B! ~. G& H' O0 k
换行 5 j0 |+ ` y5 G
会在h1标签处分为三行,如何让他不分为三行呢,只需在css中定义h1{display:inline;}然后就OK了。
" w, B% x8 N, j8 ^# [* f4 j " g- J8 a/ x6 \& `( f8 _
以下是display的用法和定义:
- X6 f: J, e6 B9 d5 R6 R2 F5 H. J/ m- j& | ' w! i7 E X4 d8 O# ?. i
5 W6 E# E: a" V* W7 A9 K+ e定义和用法
5 V, D1 z5 k5 Q5 \: R" Rdisplay 属性规定元素应该生成的框的类型。 / X: }% B B/ Y
说明
1 E7 i0 K6 N, o5 q/ B3 N& \$ M# b这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML 没有内置的这种层次结构,所有 display 是绝对必要的。
# w6 @' O# ^! k& j注释:CSS2 中有值 compact 和 marker,不过由于缺乏广泛的支持,已经从 CSS2.1 中去除了。
: k" _4 @! g/ a- ]: a1 {# v
4 k( @( e' `% i9 q3 V) w- r' S
4 n F" m5 P/ k' k/ Q: J
2 A; e1 {1 E5 g! W% B| 默认值: | z. C4 }) x" l& \
inline | 9 N# |' ]' [4 s0 t$ E& x
0 o) N, W3 U5 O
| 继承性: |
0 Y7 w6 U$ m) Hno | 8 `. [ v) L! B. o
) F; l1 _; R; R5 K! H| 版本: |
1 i1 N% f9 T' ]0 r: @CSS1 | 0 I- e5 z- [* j7 w4 D
; z: Y/ w7 g" ^( c6 q; r4 D3 o| JavaScript 语法: |
! S/ R# t) ?! Z8 b$ ~& iobject.style.display="inline" |
8 ~8 o6 t' `3 X# s$ B) }0 v9 Y% O) a: H6 W
实例) \3 H" ]+ `# ]1 @+ h* D% {% f
使段落生出行内框: p.inline
+ t8 ~; p/ Z) _- s; ]- x {$ m0 L' a$ n3 a, m+ N a$ K
display:inline;5 b' |/ u; w' P4 a
}
0 [$ m+ {+ Q/ M, g% G4 o x9 g5 g+ ~! U2 \1 ^$ _! b
浏览器支持9 m8 j( A4 ?; S
所有主流浏览器都支持 display 属性。 0 @3 M, N3 [+ V' B9 }4 w2 W
注释:如果规定了 !DOCTYPE,则 Internet Explorer 8 (以及更高版本)支持属性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及 "inherit"。
+ ~) q7 C, g V' u% T/ ?/ _
4 U% [; V' a( u6 ^9 q3 u+ n8 }7 Z可能的值' p4 Z* c- F4 J& ~$ v1 g0 R% `% s
7 y3 o! c5 S% f/ r5 z3 _/ O
# Y% B) g# V8 l' A
: L, R+ Q/ e9 E% X9 H| 值 | 3 H0 W" c$ O3 p9 @2 k r. w; V
描述 | " @+ [. t& v+ d4 E
3 C5 S: c- D9 _ [| none | 4 G* H( }* y0 d4 p/ y7 T
此元素不会被显示。 |
& n3 h. E9 U( J. k7 t5 I* u& `0 o$ t; j; E0 Z
| block | B c3 r i! R4 P2 ^$ O+ ` x
此元素将显示为块级元素,此元素前后会带有换行符。 |
3 }* z% S, J& n8 @' o" u. r5 u; Y% h; H7 D0 p) |( q) b
| inline |
% T( S" i' e; C7 ?' G/ ^默认。此元素会被显示为内联元素,元素前后没有换行符。 |
3 Y2 s! V( A+ W+ k W. s" {/ Y1 Y, H7 l2 N
| inline-block |
' h, S% G# r5 s8 T" F行内块元素。(CSS2.1 新增的值) | , b+ _( N l3 m/ l r
1 `7 a! C$ s) H, n* j7 s| list-item | " X& x$ O# y2 b3 Q1 {; y$ v# G
此元素会作为列表显示。 |
- R. g; l" X" g* P% s
9 U( Z8 J. R( Z/ }& ?3 A- z| run-in | 9 p( f" Q7 A/ t4 [# }
此元素会根据上下文作为块级元素或内联元素显示。 |
5 E; K: d" B$ P/ w1 v0 _, Q, U9 O1 |, C$ z
| compact | e; s; @ v* U' S/ e) @
CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 |
8 f9 v8 z3 J b* S
; f2 f. ?; C' {3 ~| marker |
3 b9 |1 X2 Y B! v* M9 bCSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 | $ C9 b) s% T/ Z. a+ B
$ h$ n; U/ S" X2 X ?8 x$ f( q" p
| table | 3 h# z& p) C, T! f6 m$ X
此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。 | 5 T e! q* q7 w* [
) ^1 P& R9 m. m| inline-table |
& g$ X8 O" A; u8 A) s此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。 | 8 b. q" J* ]) t! r) D M0 Q
3 n/ H! [1 g- v. Z4 }| table-row-group | 0 P8 ^/ m6 f% {6 Y3 i
此元素会作为一个或多个行的分组来显示(类似 <tbody>)。 | ; u! z9 l. f- V$ y; g/ x7 x* [) D: j
9 F% {/ Q* I& a/ J9 _, V# ]
| table-header-group | ! d3 c, V0 a, D9 r2 ^7 {4 c; ]
此元素会作为一个或多个行的分组来显示(类似 <thead>)。 | 1 A8 t$ D' t8 f9 J" Q% _
5 |& k3 T5 Z* e0 g
| table-footer-group |
$ e& J+ P1 ]. i2 z' c此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。 | 5 @" h2 y) B6 R# Y. F, m. r; J
6 i* L& U2 i4 G% P* `4 t| table-row | ) U2 N a h# y2 L
此元素会作为一个表格行显示(类似 <tr>)。 |
+ C" m, m9 z% E( l
0 \$ W8 `6 e6 h' j& D3 J| table-column-group |
2 `/ D, w( I. R/ O* x8 d0 e: O此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。 | % B. Q+ k7 T$ |- U2 m
! ?+ r6 z. J% T. V7 L9 I1 ^| table-column | 8 ~% D* _# e. O1 B7 U( C( ~
此元素会作为一个单元格列显示(类似 <col>) | 4 `8 a$ K7 }! V: f2 Q6 k
" x. l( q; U# x9 E3 i! H; f$ d: p" z| table-cell |
& ^8 ?5 D$ @& ?% b此元素会作为一个表格单元格显示(类似 <td> 和 <th>) | ' K1 i0 j# C2 M" S, W! p6 {
2 g# e1 w2 t* N; k
| table-caption | : D* k- {+ s( l' h- F3 @% Z+ }
此元素会作为一个表格标题显示(类似 <caption>) |
% ?) p1 l- c8 y! ^/ M
- _8 A" N9 a9 i0 d/ X7 y$ P' Q| inherit |
" m: o0 z2 G- }$ _1 Y$ N, @规定应该从父元素继承 display 属性的值。 | |