|
今天做网页的时候刚发现的问题,在一句话中加入h1标签或者h2、h3等,如下: 7 x' G! |- Q% w9 ]# E
不<h1>自动</h1>换行
7 [# g# p; ^) U- X 显示的时候会是这个样子: 2 C4 Z) l, V F6 ?8 R
不 , Q# @5 U$ ?0 M6 O; Q) z
自动 ) w* {0 t( R0 N# w+ F/ @
换行
0 C/ a4 G* P3 k6 G* H; z会在h1标签处分为三行,如何让他不分为三行呢,只需在css中定义h1{display:inline;}然后就OK了。 * C$ L5 ~: @6 A6 a. r+ p7 z+ s/ F; K
6 N( [! l& m2 B6 x以下是display的用法和定义:
4 \% d# m+ E$ I7 s& T
9 c+ v) `3 ]2 N$ L
- K5 V9 @; }# j( f& M! X+ e0 _' Y# z定义和用法
& A& `7 Q( n& Z2 Pdisplay 属性规定元素应该生成的框的类型。 , n0 `7 V" T9 |" H1 ?
说明
7 N' w/ M& G8 ]7 x, s0 `, {这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML 没有内置的这种层次结构,所有 display 是绝对必要的。 D1 f2 E: d) p" v
注释:CSS2 中有值 compact 和 marker,不过由于缺乏广泛的支持,已经从 CSS2.1 中去除了。 1 ~. n- g7 A/ o' h- W2 f W& c2 O+ N
$ @" A% G2 V! L/ t K& }; A& `
8 {% |* e5 U+ ~. s/ F
0 a- b% `) W5 D& x0 T| 默认值: |
P! N3 _8 i9 I/ ]4 X7 cinline | 0 n$ m/ I( F2 B" W0 Y
" m" p: z9 B/ N4 ]" G7 q| 继承性: | ( X, s i& S2 H! N7 g" m3 s; a
no | 0 w4 a5 A3 Q) }8 D2 `6 o. V% O+ U
. w$ ~3 H6 }* x! v5 ]% _) T| 版本: |
4 h8 L/ N6 P+ p' O4 R# N; C3 pCSS1 |
+ H: x) N$ d/ I" Y4 V7 X
' }1 m0 H0 z k# ?* p| JavaScript 语法: |
: u& u! w0 G1 l B+ Fobject.style.display="inline" |
& Z7 A' R7 }, J# c; w4 W7 K$ `! w+ _( n& x% T) [# x
实例' T" K8 k8 C( k
使段落生出行内框: p.inline
$ }3 X, g/ } d5 S9 d4 s0 T {' I& k3 w+ K9 ? s- l1 S8 X+ ^8 T8 }" L
display:inline;
! ~3 D" F1 }8 n6 p% k }
8 V9 c* z) _! O2 M5 Q- [ @
9 |8 p2 [8 J" K- G0 N浏览器支持8 b* t3 c: p% ? y. A
所有主流浏览器都支持 display 属性。
! b. ? B4 W" G" Z/ f注释:如果规定了 !DOCTYPE,则 Internet Explorer 8 (以及更高版本)支持属性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及 "inherit"。
D5 @: }- v6 ^% S$ H
8 v$ @2 O7 N+ `/ R( ^" T+ x# y可能的值
" |' i, k1 X0 G+ E3 Q, [ c4 n# T! S
: Q" I* }) t! V* ?$ ^
. i0 a+ q7 F; n3 d8 Y| 值 |
, I' d9 I8 Y: _7 j描述 |
; v* @3 s$ o6 Y9 G
; D- l0 X8 W/ C8 f* P! y+ m7 ?5 || none | " \. M& x3 A! ~$ x# L
此元素不会被显示。 |
4 v$ u- @* c( h5 ~1 F" R0 f; Q& U' g3 [
| block | / w9 h' @" H4 W
此元素将显示为块级元素,此元素前后会带有换行符。 |
" F. j$ _- z. E2 u! Q- P
0 h3 m/ \" ~: d0 I7 z| inline | : |1 {9 D/ N' K) \( Y/ n$ I
默认。此元素会被显示为内联元素,元素前后没有换行符。 |
) Q" e" i. b" G% t/ |- F; [1 q7 q6 G
| inline-block | * S0 U" ?/ e/ V! _' P
行内块元素。(CSS2.1 新增的值) |
4 a3 K5 d) F m1 Q$ y
, `, x( q; `' l( _9 m0 Q| list-item |
7 }4 K: K9 Y, B$ O( S; U ]) R此元素会作为列表显示。 |
- j+ l1 a" k: s f
9 i' i7 K$ C/ n/ }. S$ z7 @| run-in |
/ }9 o: } Y% W7 f3 g5 @: d此元素会根据上下文作为块级元素或内联元素显示。 |
- f4 I) J( Q8 Z# r, C* y$ w: i7 M8 K5 {9 n: Z7 @" B5 N/ p& F# L8 ?
| compact |
9 C0 o7 ~* u9 X4 y5 Y( t6 f" pCSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 |
) i3 Y! U5 N- r; [" P
( a- v d2 ?+ K- Z1 q# c| marker | + j1 x" K9 Y; K0 U
CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 |
& r9 @! H/ \* s( J
; E( e$ R, \1 U4 {: M$ V' v0 M| table | }2 y @3 r1 w, H1 f- l
此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。 | ) W5 V. L* V3 N* Y" s
* S; ~6 R3 j; j" G y0 h
| inline-table | 1 v5 G4 D/ a, [/ ?. D
此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。 |
& p0 P, e: M. Y9 V/ T& N
4 n5 o4 H2 R! [' G+ x| table-row-group |
: ~3 G5 \ h# G" y4 C此元素会作为一个或多个行的分组来显示(类似 <tbody>)。 |
8 @5 Q1 ~. i# N6 B, d) D
" U3 c; Q0 K( C5 I% ~/ u| table-header-group |
! n% z' E/ g4 y$ M6 {- j3 J此元素会作为一个或多个行的分组来显示(类似 <thead>)。 |
/ }1 A% T6 t* c# a; f- R. O4 k* d; f* V- I( H3 z( \% P q1 ]
| table-footer-group |
# D! N4 P# \, |) U' w% N _( K4 @/ N此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。 | 6 O4 E* U" N5 g% p+ Y
' r2 ~" \1 `# @6 u/ k| table-row | . V$ A& b' Q4 e5 z6 y1 I
此元素会作为一个表格行显示(类似 <tr>)。 |
; ~3 W) y+ ?3 ?# `- t- A7 b" }2 d, c! [+ @
| table-column-group |
# _" r! x' c/ @$ A6 z此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。 | 8 W+ M+ p. ?" m: ^1 ?. g! {3 ]
& v5 k9 e. x. n$ G0 C1 B
| table-column |
( \" D; \4 I; p7 p此元素会作为一个单元格列显示(类似 <col>) | 4 l* X( f h+ |
* U3 J: A) o7 W% W, _% F
| table-cell | & W N2 |, |: s b4 x
此元素会作为一个表格单元格显示(类似 <td> 和 <th>) | ) b3 l. E' I; d* t6 G6 I
+ [' H1 v# q6 E3 P5 Z. a
| table-caption | 6 A2 d, l' e& M
此元素会作为一个表格标题显示(类似 <caption>) | / T9 M" V# f* _9 C1 M$ `! V
% Z6 c3 \4 D }5 I| inherit |
- e. c9 y6 c% e+ |$ J- T: w @规定应该从父元素继承 display 属性的值。 | |