|
今天做网页的时候刚发现的问题,在一句话中加入h1标签或者h2、h3等,如下:
9 `3 L2 p: l& `$ A- S 不<h1>自动</h1>换行
Y) y6 p! |6 q 显示的时候会是这个样子:
. ]3 z9 Z8 e v4 G5 T2 d不
) l) p% r; {+ ~' }! j( _自动 5 `; G2 w& f) \ ~/ J2 A
换行
: Q7 h- h$ W. c$ d会在h1标签处分为三行,如何让他不分为三行呢,只需在css中定义h1{display:inline;}然后就OK了。 $ P' F# q& ]8 }# A( X5 s/ ~
3 n+ k: }! a: G M8 o
以下是display的用法和定义: $ g0 z, z. n" z3 z( T
5 i* f3 r& D( o: w
: r g8 l. @7 K- _# B
定义和用法0 c" q0 O- w9 U) k+ c s9 H. M; k% K
display 属性规定元素应该生成的框的类型。 1 X) W; n4 Y4 j+ h5 A, y& H
说明- m4 Z7 k3 ] p
这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML 没有内置的这种层次结构,所有 display 是绝对必要的。
! |* e( l& K7 w I2 j# r注释:CSS2 中有值 compact 和 marker,不过由于缺乏广泛的支持,已经从 CSS2.1 中去除了。 9 g9 v4 v' h9 T, P, P2 ` n
* ^9 K! S- e$ o2 u2 x
# W% I& O o/ w$ W% q2 G& P; D% U9 R1 J
| 默认值: |
( N( y0 Y- K3 N4 g9 Minline |
5 |& d2 a/ f' [* l2 I1 V3 `( h$ K( g! H" m( Z/ V
| 继承性: |
) w l, ]% u( d1 C# ?- Uno |
% @3 j- l* D I
! E2 g. o- H( J, L1 s| 版本: |
8 r6 Z( e. X q1 BCSS1 | - Y4 C/ L. Q* |, y! `2 g8 J3 ]9 l
% k. w4 a% P/ ?6 Z) p& U2 Q9 b: {% U
| JavaScript 语法: | : r* O0 t7 ^" q1 Y. m
object.style.display="inline" |
4 z. K+ y: R& l% [# l# h
$ y5 ~9 m$ q- P2 @% n0 ^0 \' `实例) b6 J$ o, \6 K3 j
使段落生出行内框: p.inline
u% p4 B1 u. S! r: v+ p: ` {
/ v8 ^# r* j, v/ ?4 u0 l display:inline;& l, C; W# a* [0 Y
} 3 E* \9 Q6 p2 T h9 K
( g$ b2 _7 p: J- s, `8 m浏览器支持
" s- U+ h8 ^( h$ ?4 t( e6 s' h所有主流浏览器都支持 display 属性。 8 b/ m6 z( T* \- I. `! \
注释:如果规定了 !DOCTYPE,则 Internet Explorer 8 (以及更高版本)支持属性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及 "inherit"。 1 r$ B0 B: K# X) ?* f: N* c$ e$ [2 j
( L3 H6 k: q# Z9 Y可能的值0 `9 }- z: O/ n% G l) n' d8 e
2 D% `: {6 y+ [* c: L' q
i. @/ k7 S; M8 S C4 T
& j5 m6 E7 B7 ^ f6 w/ U1 @! F* N| 值 | 0 w; l, [+ m, v6 r! w
描述 |
9 S# d0 S6 ^7 d z5 \0 h& V( s1 C5 M; j, v" v2 d
| none | ^7 k" F% m# f
此元素不会被显示。 |
' e$ O9 q) i5 l6 r3 S0 ]& \$ x6 A1 h8 E3 y5 G
| block | # f; M2 x# J; w
此元素将显示为块级元素,此元素前后会带有换行符。 |
( u1 T4 A4 X- F& T6 O% ?7 p
9 U! o' C8 s1 P7 E% W& ^, D| inline |
: ~8 b0 Y/ ^9 y: P* A默认。此元素会被显示为内联元素,元素前后没有换行符。 | - j4 X+ H4 e( l9 u4 M; Q" i, h6 g
1 S% Y9 S$ e4 b* r% N
| inline-block |
$ ~6 x( [; r" }, K }3 _9 G行内块元素。(CSS2.1 新增的值) |
0 z) {! |% f' v0 S; @2 E+ H( o
9 L! _, a2 a O$ c| list-item | 9 A; _8 T# Q) L! Y1 t
此元素会作为列表显示。 | + `7 b4 `$ ~7 g2 \1 y3 h
+ j j @4 D8 i* E6 P# v& ^| run-in | ' t3 i/ z1 C+ ~. s& f. t$ O
此元素会根据上下文作为块级元素或内联元素显示。 |
3 u0 n! |! F C" }; u
* _0 p1 s, K, S, P: S, y3 L| compact |
- R& W% v" C2 S$ `$ Z0 ~3 yCSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 |
* w( {& G5 ]( U; R/ M0 z) ^" |
- H7 n- A2 c3 q| marker | 5 B! m3 [/ s5 v6 m' |" v8 D
CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 | / V; N8 {4 I1 `; F! g4 c8 i7 m1 d
- N$ L- v2 B7 U0 t3 w& s| table | 6 O9 A2 f0 _+ @# h" {, |
此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。 |
3 y' }9 v% g7 K4 P) y, y4 e4 j' C4 b) C h3 [7 p5 Q
| inline-table |
) l5 E% D( B+ _/ i% W' Y0 M; y- m此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。 | . W; P( m1 {( J; x+ Y/ T/ W+ H
* N' N# U6 t8 _! i
| table-row-group | ) z! K, R$ o" L2 @+ G9 q& A1 a
此元素会作为一个或多个行的分组来显示(类似 <tbody>)。 |
0 _( K; Y9 k; K3 P" K5 M/ b% z) i# u8 Z3 @# C- D
| table-header-group | . O* y& O) O! |, |9 l+ `
此元素会作为一个或多个行的分组来显示(类似 <thead>)。 |
$ l3 X4 M' v+ Y' L% {# q" i. H, N! K$ Z! `; O% L
| table-footer-group | % [; I. v3 \1 k8 j3 v
此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。 | 4 d4 D: M) S) W9 c' `: q6 V) c
3 y9 @" g& S! N* A% O
| table-row | $ D3 C7 Y2 _5 @ h
此元素会作为一个表格行显示(类似 <tr>)。 |
8 f: Q# o! X4 h3 O. K0 i& ~- M V4 l
| table-column-group | - ]& d9 t6 h, k0 F3 W z) z
此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。 |
5 Z3 f3 w+ h( f. z5 J
( U d8 O6 d* y" t0 F| table-column | & j1 z; Y) m8 |* a1 Y, l+ q
此元素会作为一个单元格列显示(类似 <col>) |
% v: p @( q2 Q8 Y, b
/ N9 @6 {( i/ Y9 Q& D| table-cell |
! e: T, ?1 m- n- W# F此元素会作为一个表格单元格显示(类似 <td> 和 <th>) | # g8 m5 Y$ p6 W6 n3 S* s
% ]5 x& h* @+ l+ f. ^| table-caption | - a( ]5 K% n9 v' h* [
此元素会作为一个表格标题显示(类似 <caption>) | a6 X( E2 O5 g1 V
. a9 R+ `& i) j; c| inherit | , h$ Y- T2 m7 F* ~5 w% o0 l2 U
规定应该从父元素继承 display 属性的值。 | |