今天做网页的时候刚发现的问题,在一句话中加入h1标签或者h2、h3等,如下: 9 U6 ~0 O4 `+ M. y0 W6 H; e
不<h1>自动</h1>换行 0 G F' }) s6 k" l
显示的时候会是这个样子: M+ Q5 R D/ p9 _# J( S8 H4 X$ X6 i
不
0 K1 _4 F" Q, d/ K Y; q' a自动 2 r y, c' V" |3 O$ h
换行
5 ~3 v+ W4 i3 k! S! U. \0 k$ l会在h1标签处分为三行,如何让他不分为三行呢,只需在css中定义h1{display:inline;}然后就OK了。 " F1 p# K M( K# b9 o& k2 x
8 a7 R7 d& O" [6 C- r( o+ W3 ]以下是display的用法和定义:
A5 m( h' H& t0 F: l/ p* x1 Q# a
8 w$ M& c! u; @+ m7 _5 P# A
: y, Q& U& H, v+ p定义和用法) Y8 G- P% v ]4 A! e
display 属性规定元素应该生成的框的类型。
. @* O( H) X5 F4 N说明* _. Q" _9 l0 G4 x r. z
这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML 没有内置的这种层次结构,所有 display 是绝对必要的。
9 x' r; k( |' |9 O) H注释:CSS2 中有值 compact 和 marker,不过由于缺乏广泛的支持,已经从 CSS2.1 中去除了。 # b5 M- B' y7 u# }
3 V8 E+ x9 w0 Y8 y5 z0 l3 v0 s# s. ?6 Z* `) E: M$ U! s/ O
- O+ N1 P0 {' @) n$ H! n3 e
默认值: | 6 {# e+ m% m; X! s) R) A$ u1 |
inline |
) ~2 Z7 w4 o! I& U- Y6 }: M4 x- L7 E5 F
继承性: |
- C2 d, r; }. Y- j- p& Mno | - e% b$ E/ O8 I9 c+ w
1 Q) x/ u M9 t7 x5 l- N3 C8 _) j版本: | 8 d- a+ R% M8 m) g' b
CSS1 | * [* ` h& p! ]* V+ k4 g- L* S
+ U6 W$ o7 G3 g+ C0 q5 P- s$ {, r
JavaScript 语法: |
1 i" J- c" ~! ]/ ?" cobject.style.display="inline" | " J( s# n/ D% K& M$ L
0 x5 |, X3 I, c0 A- z1 `0 A# W实例
$ N- H+ z, @3 h# q T _! ^# ?使段落生出行内框: p.inline4 K3 B( P. {; M( ^
{
. |* I0 K+ v* r display:inline;
9 @, X1 b$ `$ d! @" X2 _ } 2 Z" D$ ?" x( y1 d- _
7 C/ \# c8 _) }; a- u" ^浏览器支持
' E# i7 [- t( j! x1 W所有主流浏览器都支持 display 属性。
. M' h; N9 {9 S! T0 @1 D8 t) k注释:如果规定了 !DOCTYPE,则 Internet Explorer 8 (以及更高版本)支持属性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及 "inherit"。 2 f; @1 W$ m7 k5 M* S3 a
/ l( R+ M. [$ O* a2 O3 p: e! V可能的值
( y1 |! c& q" J7 D* R6 F
+ I' I5 z j$ ?4 l# g0 ^* w, H" X1 r7 `
# L1 H0 E1 V: Y& V2 I% |值 |
% Z c' N+ h# T* l6 D描述 |
) ^* S- Z& ~: j8 ^9 N0 w# u6 W( s. S( x# c/ Y9 f" U# c
none |
9 \/ V2 u. m' q4 a此元素不会被显示。 |
/ a0 c o. k/ L! f& m8 |
, |' ]& L R Y. N7 U. Iblock | & `0 }8 `9 s3 R- F; n0 b9 W. ~
此元素将显示为块级元素,此元素前后会带有换行符。 |
" N* r' r! `! N5 O. X
4 A2 \9 g6 A* P9 t4 yinline | % h% v+ V" G5 }: P; y& j: l# M
默认。此元素会被显示为内联元素,元素前后没有换行符。 | Q& ?+ z0 J( y# e
: Y' J. X/ j3 n4 e8 H9 D6 K
inline-block | # k3 F, Q2 b. g8 v, Z
行内块元素。(CSS2.1 新增的值) | 3 ]5 P Y+ N0 ]
, i: D5 m( t n+ S! flist-item | $ D# Z" V' A6 A- X+ ^ B
此元素会作为列表显示。 | 0 o1 K2 i: s1 \$ T& [8 k2 \ W
! X7 x0 N2 ~2 ?/ D% B Q [3 v; x9 ^. srun-in |
( u/ S& S$ a5 ]6 G此元素会根据上下文作为块级元素或内联元素显示。 | # _- ]4 z, x2 ^
9 E8 Y- ?) y( @9 z; z
compact |
. N1 {1 v8 m+ Y& E; A9 H2 GCSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 |
% @- {' W0 u% w! L, V9 C. A c8 t2 B
1 t) e6 {: F' a! ~. K( e5 \4 R+ ?marker | ; A: Y6 Z* ]5 x4 S
CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 |
# n5 s p; F. o" N' J6 S) n) q* Z
/ f& @' D& S% m! c: }# v2 Stable |
0 e6 A" {% L% @6 b* x此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。 |
, I _6 t2 B1 L1 ?, ]& M7 f) ^% I& U8 q
* s* R2 N% R1 V y3 Y" `2 I% [inline-table | & F8 j) m* a4 w+ ?. l a. E1 u
此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。 | ; ]: P- U$ n: ~. d! Y s# j
: q' j3 m7 `# U* M7 \table-row-group |
3 M& ?$ }) c4 Z2 n( C$ C/ `此元素会作为一个或多个行的分组来显示(类似 <tbody>)。 | & p' T0 |3 W% `# g: z; |# Q" }2 a
9 ?9 `3 d- C. a5 ]8 J& E$ W
table-header-group |
% O7 Y, ^1 c) `- w& c此元素会作为一个或多个行的分组来显示(类似 <thead>)。 |
/ c8 O) D) t, a/ K* t2 D6 C
) }' K7 j7 W1 d6 J! Dtable-footer-group |
4 j* v4 a4 W; O" s此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。 |
0 B' w+ i$ W6 a5 x; V5 c( G* ] B R
table-row |
; V& p, Q* }, S此元素会作为一个表格行显示(类似 <tr>)。 | " }) W( L- C$ Z$ Q3 c
6 d* v7 v$ ?9 Y0 Y: l u* }
table-column-group |
. m2 R' W6 {/ \1 l此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。 |
0 a# j: h& G% V& ~$ {; L+ Q+ m5 T- O# @$ N8 L) n
table-column | ; K* u, K. b: k) C7 |3 f
此元素会作为一个单元格列显示(类似 <col>) |
5 C5 |( L6 J6 B+ M
0 u/ A! G# v/ x" b- v2 b$ itable-cell |
& X n0 A3 v2 b此元素会作为一个表格单元格显示(类似 <td> 和 <th>) |
: r0 S0 a) h/ m5 T2 @! W& s; e) K6 R. f8 d c. C
table-caption |
4 }9 k2 m+ D; K9 e此元素会作为一个表格标题显示(类似 <caption>) | & g; _1 c0 p: s" b, y
# n$ z% a1 b+ q
inherit |
9 r. p& V7 ~# G4 x. z5 P规定应该从父元素继承 display 属性的值。 | |