|
今天做网页的时候刚发现的问题,在一句话中加入h1标签或者h2、h3等,如下: - x* A5 p( g6 S
不<h1>自动</h1>换行
9 S1 }* m% `5 @; }1 V* H 显示的时候会是这个样子: 5 J8 O9 [* Z; a+ t& ^
不 0 O$ C {. x- Z
自动
& @' P4 x3 E% t7 [0 ?' `/ t$ X换行
/ v! L1 ]+ E+ V) ~( \' E, _0 A会在h1标签处分为三行,如何让他不分为三行呢,只需在css中定义h1{display:inline;}然后就OK了。
' W2 R C3 \3 M- r' _9 p& y 9 f% K% {2 @: c: N
以下是display的用法和定义: / }/ I4 O7 o3 G6 j; R; a
7 S m2 z6 V) y2 I8 `
' @- B+ Y6 O2 r- P, ~定义和用法" v5 \" O" B1 w4 i9 w( H
display 属性规定元素应该生成的框的类型。 4 k+ h( x( X$ ?: ~' A
说明
3 D/ K8 J+ U7 H* d: H. T这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML 没有内置的这种层次结构,所有 display 是绝对必要的。 2 L6 u3 m$ _+ p/ b L; ~
注释:CSS2 中有值 compact 和 marker,不过由于缺乏广泛的支持,已经从 CSS2.1 中去除了。
7 L1 u$ p- g- Z
* v% V4 h: p8 p% e0 L" y) L: P% `' r" R. X/ ?
% W# \6 b2 N; i8 w( o N( W: K; g
| 默认值: | . a6 ~6 \" J* m# [" ?) S
inline |
3 }1 F: o* m# {: F& F. A- b$ \( L. N" q# A
| 继承性: | 0 d* H; P9 E D7 T3 [
no | 9 T8 @$ k9 V* h- ~+ ~
6 k# h3 V6 U2 _, L
| 版本: | 6 Y( O; e8 d" t: P1 Z. S
CSS1 | - f, \6 ?1 `+ o
5 K3 B& i1 A* c( M: a| JavaScript 语法: |
1 I' @' Y4 x( Jobject.style.display="inline" |
& y$ ~$ R. C1 w& A. Z/ c) C, J7 R- B$ ^. s: Z2 O( O3 o1 e8 I* _
实例 @% L U7 s' f7 L! ^: v8 M6 I
使段落生出行内框: p.inline U1 \* F% P0 v, h: H# s* X* @
{
7 S# h3 ~5 H( j2 Q% C( J display:inline;. C" e: B/ N* U" p. h7 p
} ! d. z7 ]: a* w
7 y) c- N/ Y+ _+ J
浏览器支持
5 c1 t3 A; l' S6 ^: a5 u5 u所有主流浏览器都支持 display 属性。 8 N V% K! y r5 O1 u7 {
注释:如果规定了 !DOCTYPE,则 Internet Explorer 8 (以及更高版本)支持属性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及 "inherit"。 ! \8 A2 G Z" X# w0 |4 h! _
1 k$ v' l3 V; M0 _' E- t/ v可能的值/ ?3 o. }# T4 o* }
( I% c2 {# @- s8 A9 A
" j: ` [5 v- t& c* J1 c# ~: Q( ]7 o! N9 n& w: p" J- J3 U
| 值 |
H% D# x7 T4 t8 \7 h' Z5 Q, @1 C描述 | - u& {$ _* e5 \5 F0 g1 G/ d4 e
1 Y( R- G* R7 f" q3 S8 O' i" W| none | , {8 s0 O4 Y5 T- O: ~( w3 J) ^
此元素不会被显示。 | : j# ~2 Y, r* d% h% i
7 ] G1 `9 H6 U: P+ J8 c| block |
- U& a1 e5 e$ J) G, K此元素将显示为块级元素,此元素前后会带有换行符。 | , ]5 O' c) U" @: @5 _: g) B
9 x" z" g8 I! s4 h| inline | % B4 d9 d$ {; y+ J9 g* N7 x7 f! {1 @
默认。此元素会被显示为内联元素,元素前后没有换行符。 |
3 n, j" m* k. c5 F! j1 ^1 `& ^$ V) E7 G2 W2 d5 P4 Q. C8 Z! p
| inline-block | . _( i$ m3 I2 O6 R: t
行内块元素。(CSS2.1 新增的值) |
6 [1 I, g; M+ z& }4 A) u% x. q4 p8 O9 j0 B8 T2 N
| list-item | + X1 H, g9 g) {4 H
此元素会作为列表显示。 |
j+ C, H1 [" P1 H& p: y0 W: p" F8 a1 {6 D4 V' o
| run-in | / l/ Q1 A% l9 y u
此元素会根据上下文作为块级元素或内联元素显示。 | 4 K4 y. r; f! t
5 U4 G7 {$ o; s0 M( a) V+ r1 E# E& h
| compact |
1 l& U' T& b. @9 |CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 |
; J2 w3 z7 b- U8 l7 _3 o4 z0 h0 g* n2 T3 `
| marker |
1 h G; q0 ~, W9 h- ^CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 |
, w* M. z/ W, m U; G# t F" L6 E5 p# R+ A2 @8 S( X
| table |
0 \( i0 l) a0 f$ u4 G+ g此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。 | , L0 c) \1 ]8 D% o& ~6 |! |0 G
: ?+ g* n8 z/ }9 v: M! p; j) T| inline-table | 4 Y3 n- Y8 R# _
此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。 |
1 ^* }. c( }8 Z& S1 R' j& i5 `+ P+ J& _! O* P+ H5 V
| table-row-group | 9 e* P/ M- H2 t' D
此元素会作为一个或多个行的分组来显示(类似 <tbody>)。 | : h7 c' ~* x9 V
% W" n- b! t% G4 ^8 M
| table-header-group | 8 R ~1 r8 N' C5 G. Z
此元素会作为一个或多个行的分组来显示(类似 <thead>)。 | , b3 `: d5 ?/ e2 [ ^
2 J, x$ F3 ?6 k: k [+ L5 [| table-footer-group |
) }, f+ [; _2 i8 N7 V此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。 |
, }/ M, ~7 V% ?6 D6 g! _& i
; l/ u! B" I5 L" ~8 a& X| table-row |
( ?7 F1 W7 ]% B6 p. G/ ?! i此元素会作为一个表格行显示(类似 <tr>)。 | 7 d) d" P; M6 D4 A3 K g V+ \
$ q. I) i/ i4 f3 i; k
| table-column-group |
& X! K: m- L: f: e- g此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。 |
* W5 E( m: X$ z. H# K: b5 Q
* }- [& `3 |0 }( ~: }8 n| table-column |
7 N; Z3 h q7 i- ?% h此元素会作为一个单元格列显示(类似 <col>) | ! V' g. ?& x) z/ F' V& @
4 N' o& A( \% Z6 A/ G! c6 H: q| table-cell | & x( o% s9 E, C# x6 M$ h
此元素会作为一个表格单元格显示(类似 <td> 和 <th>) | 2 k9 I) u; H- N2 l
6 H' ^4 i/ q' k" s| table-caption | 7 i. e( K# | L; _! ^
此元素会作为一个表格标题显示(类似 <caption>) | . R2 {. y& |& p4 Y- v
: N& j7 f+ x2 \: q2 J7 o/ @9 i% f
| inherit |
1 j3 R q$ ~0 B P5 _规定应该从父元素继承 display 属性的值。 | |