今天做网页的时候刚发现的问题,在一句话中加入h1标签或者h2、h3等,如下: ( P6 F. A& W2 v7 d) N& e
不<h1>自动</h1>换行
3 o, S# j9 \. s4 n$ g' q 显示的时候会是这个样子:
! ^+ a/ Z X* H- C& I6 e5 g9 f不
4 d5 [+ B: o2 o9 X自动
9 [5 @ |) k1 y换行
$ c' E8 T' [5 b/ g5 u; _会在h1标签处分为三行,如何让他不分为三行呢,只需在css中定义h1{display:inline;}然后就OK了。
* t5 W- @. p+ l; E
- y* e0 M4 e r6 @以下是display的用法和定义: 2 T8 P7 @# }1 ~. U0 O; p1 p
' s$ f, I" H3 k+ r1 D4 F/ Z2 h8 t1 Q4 z+ n4 w5 y
定义和用法" @* V( Z; [) Z+ k2 c8 @! j7 z3 v _4 @
display 属性规定元素应该生成的框的类型。
6 y) y( v( A! N0 G说明& D. ~ q( J) n* q) S3 A2 o- v% r- i) g
这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML 没有内置的这种层次结构,所有 display 是绝对必要的。
* I; Z5 l. U" ^4 I注释:CSS2 中有值 compact 和 marker,不过由于缺乏广泛的支持,已经从 CSS2.1 中去除了。 + o% R# H) S: N/ A2 W& ~
$ h0 v, H( [: v }, m( t3 s x7 g1 Z* l7 h& D4 ^' X# U8 A& P4 i: A; K) v$ H7 j, x6 r+ h3 H' K: A( E$ X" {4 @9 D1 K& t5 f6 _: ]9 N0 y7 d4 n7 r7 Q# |2 l% l3 g" `+ s) W- _# H7 K) ^* I( Y* [1 T8 q5 |: g- S9 K1 z5 s; g; n' J/ k. ]" q- Q: Z3 d. ~0 D) m. b2 F+ G/ ]# g P7 L6 o8 h2 g v: p$ H- g8 h
默认值: |
inline |
继承性: |
no |
版本: |
CSS1 |
JavaScript 语法: |
object.style.display="inline" | 6 Z1 m. T5 n, C4 n* ~+ k* ^
/ w3 z2 m9 o) J2 p- f7 E实例: M3 H8 U P/ ?; r' G. `5 I! V9 L
使段落生出行内框: p.inline$ z4 E2 e2 a" J
{8 v8 E8 L7 }6 s5 f4 v1 _3 k
display:inline; - P2 }, m* N1 L) {
} 6 O+ Y1 C$ _2 _$ h3 c: i
8 J0 @& h1 L! a' e- x) G8 z8 Y- k3 N浏览器支持. v( x7 n I& `7 D, i7 U
所有主流浏览器都支持 display 属性。
1 ]( L" r" o, ]- e/ \4 { _, J5 D注释:如果规定了 !DOCTYPE,则 Internet Explorer 8 (以及更高版本)支持属性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及 "inherit"。 3 G& {/ F5 f+ ]
$ W: a; U7 m" v$ o# A
可能的值
: ^ y: W9 L2 ]6 O% A' W K, B. y+ U. ^; P1 a% b# X9 H: A) v k$ L1 }! M L8 @! u! s3 A' M6 q( _6 i' O2 N6 g0 Q% r. W0 j: j# W$ s @. I& p4 ^: p& |% {. ^, r. x; m' U9 q) t+ z( ?, m% j: z5 u# j! P2 _% g4 ?- D, h0 Y( ^) o6 ` Y8 x. n* s6 x& g: G0 M* V) c4 l% ]: O$ B4 U) P2 H- Q' P" `4 S/ H! S6 `5 v5 w( P' f9 j% R$ u" u6 L/ r3 Z0 T: g- D$ c; O6 I" D' A; _, y4 S4 o2 h1 F: `: e! U1 u/ M1 z' m8 c) m4 c, y3 k% k9 N' v, Y* o) a8 b; `$ c& k: t5 e- u& d+ j0 p0 l) T6 Z* |0 K2 _( R" ?1 `% B( P, \- D$ z8 n- ~# E2 l6 L; j) d" A' R. F4 v9 ?# `4 v- W6 F( [3 S$ R5 T4 o2 H9 `, [6 L9 |0 s/ a$ [8 g4 N% \2 r8 z& ?' L0 f. h: m$ a, Q! ^) S- G9 c4 W" c3 u, {/ I- i8 Y o+ S" t6 ~ G" t( R% e# p9 S) m( @. o- o7 j1 j( P! u U$ J# `2 S P. l W# ]$ q* M" N+ U. Z/ K( H/ n w, d3 v7 H( F+ V/ J) N$ o% q) |5 {% K+ i, L% r9 Q% H8 B7 d; K& v: u" l+ t; \- n5 P) W5 u7 @) o/ D5 V) N8 a, y8 l2 m. A: }2 A' B, [( R$ S: {* e d; t9 m( I: ], {. u) n) `8 [! q: T. k" t: v# [3 K7 q+ S" |: E3 P0 H; G0 S. y+ M9 y5 ^ v* F8 e; Z9 V7 H l2 U4 {! S3 J' |+ p, C% E4 e/ O; R3 d2 _) N- B& b7 O* ]# P N8 }) ]; J0 b" _( z/ I9 X7 I! I& m* Q( r2 ~4 f; {( k9 p5 s" n4 Z* j" x* n5 |) D q# Z4 ^5 p/ y' ?- R p) I5 t1 z8 B7 `: o7 n `6 E& s$ l8 @1 {! C+ a" w' M8 ?8 B2 w: ]+ C0 y. p$ E6 ]: p7 K5 Z; B8 g# {1 a2 ?" s, ~/ j" S+ e \2 v/ m8 Q! g3 y9 X$ n1 M( }! h1 B: ?4 a+ a2 r, Q5 t" e: A4 h" |7 y3 I0 w+ k3 f, K# F/ j" |6 A7 u5 ]) c3 n7 [/ N8 y# h5 m$ D3 s5 ~' u, E" k$ S# P) ^/ h0 M P( N% l1 ^0 }- q3 _+ r5 h1 U5 F s; X% C# c# R/ V) I' v% K
值 |
描述 |
none |
此元素不会被显示。 |
block |
此元素将显示为块级元素,此元素前后会带有换行符。 |
inline |
默认。此元素会被显示为内联元素,元素前后没有换行符。 |
inline-block |
行内块元素。(CSS2.1 新增的值) |
list-item |
此元素会作为列表显示。 |
run-in |
此元素会根据上下文作为块级元素或内联元素显示。 |
compact |
CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 |
marker |
CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 |
table |
此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。 |
inline-table |
此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。 |
table-row-group |
此元素会作为一个或多个行的分组来显示(类似 <tbody>)。 |
table-header-group |
此元素会作为一个或多个行的分组来显示(类似 <thead>)。 |
table-footer-group |
此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。 |
table-row |
此元素会作为一个表格行显示(类似 <tr>)。 |
table-column-group |
此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。 |
table-column |
此元素会作为一个单元格列显示(类似 <col>) |
table-cell |
此元素会作为一个表格单元格显示(类似 <td> 和 <th>) |
table-caption |
此元素会作为一个表格标题显示(类似 <caption>) |
inherit |
规定应该从父元素继承 display 属性的值。 | |