|
今天做网页的时候刚发现的问题,在一句话中加入h1标签或者h2、h3等,如下: 2 F/ q; R" V8 k$ i: D
不<h1>自动</h1>换行 6 ], r" n/ Y t& `, J: _; s& p
显示的时候会是这个样子:
e4 m! i1 x6 W0 y, }不 ) T% k( V' m7 v! P$ h% S/ n0 n
自动
: c: I+ l1 J3 m6 z/ h, x4 T换行 |' d" h' x( @4 c+ \+ e
会在h1标签处分为三行,如何让他不分为三行呢,只需在css中定义h1{display:inline;}然后就OK了。 8 Y9 H7 g! ^* ?9 l' {
& Q0 ?, Y0 E1 T; z, |7 E
以下是display的用法和定义: + ~- d; _( u5 u
, [$ X: h! c6 Y! a6 h/ }. p$ |% i/ o$ A
1 P, U& \/ @( K# o9 I定义和用法" v( E% L" S; T+ _
display 属性规定元素应该生成的框的类型。
5 [' C) @' c% L. Y说明
5 r/ B" X4 W4 p' }/ b8 J这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML 没有内置的这种层次结构,所有 display 是绝对必要的。
4 V' p0 N n1 q) `3 r注释:CSS2 中有值 compact 和 marker,不过由于缺乏广泛的支持,已经从 CSS2.1 中去除了。 , g4 |$ J/ w2 h- A I+ e
3 V1 m: |5 z9 {7 w2 ?: w& u
7 \& k) ?# |+ y
, W6 M I! A" A) O" c| 默认值: | % g7 @3 K# p: i8 D/ `5 H! Y
inline |
- g C+ {: Q' s- @% x9 y. F
( i2 D5 [4 L- b& w* x| 继承性: |
5 L1 b! S8 j: o0 @ x: } lno | . x; E( k" f7 E+ {' J
+ h. N2 _) k7 L
| 版本: | - D( _0 [( g# t6 h* C" P
CSS1 |
@& O. [9 l2 }2 O
4 S/ H8 \9 H" O, {" z6 M| JavaScript 语法: | ' E% P* a$ z3 F3 `& O$ q; `5 B
object.style.display="inline" |
) \# U' ^$ i7 n$ g. M d
. x6 |, b6 }* t) O% T# e5 v0 {- E实例
0 o$ H$ g3 f3 K使段落生出行内框: p.inline
9 p8 f/ V) _% I+ q; }- R _ {% d7 T) Z/ q3 ~
display:inline;
) g0 G( d7 w" N3 J }
/ y+ A: e: U& d( N0 L# m8 g% k& C# J6 R( L/ h
浏览器支持& q3 [# ~( |( \, [$ U1 u$ T
所有主流浏览器都支持 display 属性。 0 C r8 O9 N1 h1 N! ?5 Z. j
注释:如果规定了 !DOCTYPE,则 Internet Explorer 8 (以及更高版本)支持属性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及 "inherit"。 0 I, R4 s# c- {+ ^4 p# \. @( Z$ H
* c: t- M- k# A3 Q( e% Q5 I5 H可能的值$ Z' T4 L' E, O1 p3 J4 _, D
+ m# V% ^/ r$ n7 [
7 Z& I' K0 A+ K% h' y) R# ]* I% R0 b7 M
| 值 | 9 a* a! ?* L K( u8 Q$ s
描述 |
6 W. r1 b* H1 Y2 u. P
8 o; F. Q' V' M# D) k| none |
2 O6 E1 o) Y0 G* F; D' D此元素不会被显示。 |
1 h2 t' m- q( {# q1 e' r+ x" A4 Q2 n# |
| block |
2 e/ d; J$ l3 t* V2 z% t此元素将显示为块级元素,此元素前后会带有换行符。 | 5 a9 j4 }3 i; ]+ S
+ U$ r% }( R2 d: i1 Z$ c
| inline | / G3 O& D( H0 r& n' e9 n( y# ^
默认。此元素会被显示为内联元素,元素前后没有换行符。 | ; @3 u! R- F1 H: u, h- x5 l! L
: w' v& Y2 O' y' s* v2 u) @$ Z
| inline-block |
# C9 g7 L" Y' o1 Y行内块元素。(CSS2.1 新增的值) |
; e! j) I0 E3 f8 x& m2 f9 i: N, C$ ]
| list-item |
+ ? H, x. K' v# g6 o5 W此元素会作为列表显示。 | 3 o0 p3 h+ D) o5 H
/ ~+ f7 n0 {% ~. I; G- L
| run-in | / J3 A4 Q1 e1 q u7 X& E; }' n
此元素会根据上下文作为块级元素或内联元素显示。 | - a) I) h3 n$ z( U5 V
7 R( p6 j4 d, n# D
| compact |
. H' U+ d+ W3 V6 K' z; i& o& rCSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 |
0 U6 _0 ?1 n6 G
- x( W1 k, n% o9 m- T1 y. R| marker | 0 n* D& y! ?9 y: `! _
CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 |
( p6 {' c. _$ c3 H2 z
2 F1 ~& |& u% O1 | C| table | 1 J; U _+ ]( J2 U8 O3 T3 m- c
此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。 |
( Q( f- U7 j+ k' q* H1 v1 {, U4 u
/ d! ~( ^" s' n9 l* Q| inline-table |
/ F/ h# E$ F. t1 j9 @. X Q2 W此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。 | , C2 M) B% s8 z! J4 G& q& f8 A: S
- A* j3 t7 F/ m6 G& j8 ^
| table-row-group |
' b5 d9 b* Q4 ]. b8 N此元素会作为一个或多个行的分组来显示(类似 <tbody>)。 | * c2 ?2 B4 ^- e3 j% Z: @" G
$ q/ @! Q& t" U1 y8 X| table-header-group | + |! o6 W; d7 z8 W4 F. G# ?' Q
此元素会作为一个或多个行的分组来显示(类似 <thead>)。 |
$ P9 b D& Y4 L) A; Q5 S* g& c1 Z1 b, c7 W6 {' N( O2 S
| table-footer-group | 2 L8 L* \# z: J1 i+ K+ m
此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。 |
9 P4 t$ w1 y- D& u3 a9 n% Y& q3 P; v1 ?
' P# J4 E* K; w9 _; K; L! \# }. [| table-row |
! V) _/ f4 z% s2 G- j {% \此元素会作为一个表格行显示(类似 <tr>)。 | 4 J1 o: G% x. i& v: o# ?1 z
8 P \* ^$ f1 o7 O% n8 a
| table-column-group | ) G# A# n# y# \* ^+ u! i3 q
此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。 | . [1 d- ?: K0 w+ f; h' h' O
0 f: k( y4 Q. P! Y. W) _$ l5 |- k# `| table-column |
( X' l% ]' b1 i1 H; { @" k* ?此元素会作为一个单元格列显示(类似 <col>) |
* R8 I' }" ^6 u( u. R w, `
/ L# \3 t" h' E5 r. }' |" p, Q| table-cell | 4 ]2 n+ y; M" _: h
此元素会作为一个表格单元格显示(类似 <td> 和 <th>) |
8 t( G1 R8 Q& E" x. K; k7 d, `! @
# B! S$ u4 D0 o" m9 Z| table-caption | 0 B/ o. p( p. m
此元素会作为一个表格标题显示(类似 <caption>) | ! ^% \: y7 ^# D
6 ` p% w2 o& Y+ H
| inherit |
7 E5 i% B( ^0 p! B( A; J* Q) R规定应该从父元素继承 display 属性的值。 | |