今天做网页的时候刚发现的问题,在一句话中加入h1标签或者h2、h3等,如下:
3 a) i2 `! ?- U, | 不<h1>自动</h1>换行
; Z0 \% ]0 A( J. M+ ?4 l( B 显示的时候会是这个样子: 0 `" ~0 x/ T- N+ d
不 4 ?% d: T9 F3 I0 _' q( e5 d+ y
自动
- ~! p' f* b0 i! o, k% u+ ^换行
3 }+ U- U8 s+ Z* W/ i. t8 u. i会在h1标签处分为三行,如何让他不分为三行呢,只需在css中定义h1{display:inline;}然后就OK了。 % h0 c- `' m1 p/ B4 c4 I
. H# M8 A+ N9 T; E$ O* a以下是display的用法和定义: . A$ S4 A5 r0 \3 ~6 [3 n! B
3 v( p9 I) N, B. u5 e1 z3 j
% Z/ G- l7 c& }! ]
定义和用法- N4 Q1 O6 [) {0 g! U
display 属性规定元素应该生成的框的类型。
, I. g H& N7 a, z# o1 o* t& Q# o说明
6 S) A. F- Y, ?7 _$ {* f! K6 p这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML 没有内置的这种层次结构,所有 display 是绝对必要的。 7 B8 y% e8 y9 K- @; {) h
注释:CSS2 中有值 compact 和 marker,不过由于缺乏广泛的支持,已经从 CSS2.1 中去除了。 * h7 s% X& f: b( Q! u
4 b7 c; t% g$ Y
' F& [& o% N4 P# y2 \2 ~
! K3 \: u9 U% u9 B, q; y; G* D
默认值: | # X/ r0 e0 c0 }; M7 W
inline | 2 }' i# {+ L( \7 x, Z# O
0 C( R% r2 ] n# M& I( f+ D: m继承性: | 0 N7 v6 d' Z1 y4 D9 \
no | 1 u- V8 X, P( F5 o+ \5 n7 T, w; S
8 t: D2 V& `; ~% n
版本: | : o. J( b7 t5 I) ^9 E
CSS1 |
' b& [: \7 D% {( s8 Q( q& b/ ^4 C# X- b
JavaScript 语法: | + }/ v6 z4 T4 b+ G! [9 N6 ^
object.style.display="inline" | . L3 d! Z8 }! S" i0 e% f! N
/ M* B5 k5 N3 |5 |4 K2 f4 |
实例) H8 M# j Q5 h9 F8 G. {! L3 i6 v
使段落生出行内框: p.inline
: c; D+ k9 i7 }1 V2 B e5 \ {
: I- X7 V- U0 o6 R! h display:inline;
6 n. C& [3 s1 K; r( a0 R }
2 p; Y" A- j) X7 c* i
. U# v6 [' g3 P$ D! w浏览器支持
0 [9 \/ \9 Y9 T% _所有主流浏览器都支持 display 属性。 $ O' V0 H" j7 b" x
注释:如果规定了 !DOCTYPE,则 Internet Explorer 8 (以及更高版本)支持属性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及 "inherit"。
5 J9 M# z0 e0 {) [1 g5 ^9 {: b5 w) A! D b: z0 h
可能的值
& M7 }7 v4 w/ N3 G3 A% I' y6 b1 s2 [1 k* s
# K2 H+ |( |3 H+ v) F5 p6 T6 l, W8 S7 Z$ b7 o0 G
值 | $ c9 t9 `5 H$ B
描述 | $ a/ Y6 }2 A- N' H
0 j1 I' ]+ _) Z0 H9 @none |
7 X/ @# l8 N+ `2 N此元素不会被显示。 | $ i/ c t/ P" r; e, `
8 ~; V+ c$ U& B
block | , Z- b" r) P( {8 j4 A
此元素将显示为块级元素,此元素前后会带有换行符。 |
, h$ P# r o% e# s B. B! n- Y, F& O5 `# Q( e- C: T2 C
inline |
7 b* O \2 ~$ W" Y9 U, W默认。此元素会被显示为内联元素,元素前后没有换行符。 |
3 ^* w; J* g; `% U. r5 F! ~- ]+ Y( n: ?+ c3 |( n$ `
inline-block | , E1 u. U, Q6 i6 k
行内块元素。(CSS2.1 新增的值) |
; H( I, A. y3 u2 L5 \5 V3 F c: g" \: v" `/ q2 N
list-item |
! [ z; U* y! X2 D此元素会作为列表显示。 | 3 E0 i- @2 b- D, n& R
, X' e2 l# c& x8 O6 f; t& g: z
run-in |
& }8 _ N: U2 [+ N9 g4 c8 V! P; R此元素会根据上下文作为块级元素或内联元素显示。 | + S( ]2 ?/ ^9 U& @% H/ e
7 [) ?& @+ v0 E5 J/ G
compact | ! k' v& z6 ?" d
CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 | 1 _+ O: p- M. e- ~8 _% k W
6 a5 d) m6 x- S) w% f; `
marker |
& F) R% J5 V) Y8 \2 D: @' F- uCSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 | 3 C" a- I0 W" K% p6 k7 y# S2 N/ V
( L; A( Y0 l, p4 B8 E3 w
table |
9 X z c9 q( P# j8 C此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。 |
3 g9 A) G$ J, I) ^" u! @
6 V+ `& o0 _0 }; f" sinline-table |
- H4 W9 k0 N" ^8 Q' }7 o% t7 p# t此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。 |
/ e- w/ P5 Z# H" g! D/ C" M* z0 U. x! w' [7 O
table-row-group | ; g' z8 L% u& I! {( G- ]# L
此元素会作为一个或多个行的分组来显示(类似 <tbody>)。 |
& X( W. W1 u8 d6 w g6 y: w( N3 E" h. L$ M( Q( c
table-header-group |
* f! ]0 m/ |$ o' K! l7 G/ I此元素会作为一个或多个行的分组来显示(类似 <thead>)。 | E; E0 e6 |2 g% A; ~5 ? N
- W( V4 x/ o5 jtable-footer-group |
" E8 y$ a- j" N( W! N( ?, F此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。 | 2 o' K7 X1 o2 j" i
7 W4 Y5 D6 Q( p) P. C) p# ^( m
table-row |
/ ?! \; T* M4 X. ^; n此元素会作为一个表格行显示(类似 <tr>)。 |
% W/ T9 @$ \) y2 l/ A1 Y
+ ` d- t" c/ d2 y0 `& `table-column-group |
0 `% r- N( Y$ J" j此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。 |
5 w) E+ ?1 Q9 q0 C7 C/ O
7 E! ?& F3 u- z/ D( q# I/ L2 Ftable-column | ( k7 x+ C, r+ t, v, T6 E; x
此元素会作为一个单元格列显示(类似 <col>) |
. Z3 V$ V% ?3 v- Q, J
) ?/ s: i2 e2 ^$ P" N$ n4 X6 }& ntable-cell |
. N0 P z( W: C" }0 L此元素会作为一个表格单元格显示(类似 <td> 和 <th>) |
6 O1 u m( x% F, u9 U
( G6 ?7 z: ?* p! n% b# ]table-caption |
% U- d8 ?1 t4 C. \% l" Q此元素会作为一个表格标题显示(类似 <caption>) |
% q$ G J) |, f, N$ v, M' r0 A3 |' C$ c F* k/ ?* i9 j- k
inherit | ) h" e! @+ x& ]. O: j
规定应该从父元素继承 display 属性的值。 | |