|
今天做网页的时候刚发现的问题,在一句话中加入h1标签或者h2、h3等,如下:
! O0 D* { v L 不<h1>自动</h1>换行
( g1 O* N" h& U6 T, {: V 显示的时候会是这个样子: ' `% Z6 B7 A8 U9 I* ?
不 9 C: i& Z% e6 y. O
自动
6 h6 e% S1 n* Z1 N4 ^' l8 ?换行
7 \ i# e& F, ^) r会在h1标签处分为三行,如何让他不分为三行呢,只需在css中定义h1{display:inline;}然后就OK了。 ! o1 p9 x/ A3 d
Q9 s" T" r1 f6 g
以下是display的用法和定义: r% b. _4 A/ G* k
. u; q+ c8 R) c! M: t
8 M7 m" A* {8 }. G7 p- _1 k定义和用法: b: x. |8 \; Q/ h
display 属性规定元素应该生成的框的类型。 3 v# \% m! {& C' E) ?
说明
$ I9 F- H1 G6 t/ L# V# o这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML 没有内置的这种层次结构,所有 display 是绝对必要的。 / T b5 X) h8 C/ o k9 i
注释:CSS2 中有值 compact 和 marker,不过由于缺乏广泛的支持,已经从 CSS2.1 中去除了。 $ l8 s; Q1 {, \- D1 R
}2 d: i2 R1 D- w, S
3 j4 f: @9 Z4 ~/ P3 K* k" c& l- y8 P
| 默认值: |
# R+ k0 _: J% c X* \ l% Uinline | + y0 ~( r' x$ d3 G5 `/ @
' s8 Z9 O* B4 z5 @| 继承性: | , j' c9 F$ I" t5 o. I7 A9 \7 n8 o
no | % t7 n9 d& _, C
$ |3 l5 f: Q3 k& V$ V1 |
| 版本: | " `' L6 n3 q& |9 Q
CSS1 |
: ?8 {& X- u" W; t
0 S& l6 N! L& d$ X: M+ p| JavaScript 语法: |
1 t, @ q/ M0 V8 E Wobject.style.display="inline" |
9 c! Y' a9 I1 C( w- k9 [* _( e" F: A6 J- m
实例
% {. ?- u6 V( |* {( o2 h% H! c, E使段落生出行内框: p.inline6 U; n! B' V8 `
{/ n! l7 W. Q3 P+ Y6 K
display:inline;! r% _! i! e1 B5 M( [4 H
} . H! J+ D p. K% Y: Q
- P& x) \/ X3 G0 {# M浏览器支持' g* w* |: L! ?/ G
所有主流浏览器都支持 display 属性。
7 H# U7 n5 Y4 G+ A# 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"。
+ ?" R- M d0 @# D
7 e) O! m( h) b( F可能的值! h) B' ~: ?* r7 J5 g) A
* @& o3 }: n- |8 Y( E" D- Q% O
" E0 j8 I4 h0 B2 ~2 M, @- A9 p
$ E; n* n" y( a7 p| 值 | 0 q( f7 s# y O7 X2 F3 H) H
描述 |
4 T& x9 J, l- S. U0 I5 |6 Y
5 P2 O9 @6 S2 I s" H( ]( n| none |
9 k+ c; G$ q j; H. O K8 `; O- F此元素不会被显示。 |
1 T" m9 ^( c) S! q, q* R8 Z \2 w. `6 p' V t4 u( W: w
| block |
6 b. S$ d" X0 R) P9 U: R8 ^此元素将显示为块级元素,此元素前后会带有换行符。 | 0 D+ u! p4 \, W3 [* T, o8 u3 f7 k
. }9 V/ Z2 P& v% N H0 G9 C
| inline | ( a7 |: q- R5 k! ~* {
默认。此元素会被显示为内联元素,元素前后没有换行符。 | 5 h' I2 O4 }$ a' X# F6 K0 u6 T1 D
4 i' X+ M4 z' P| inline-block | + x+ T* u4 V! b. f' ]. [8 Q/ g
行内块元素。(CSS2.1 新增的值) | 9 ]. {, \9 L9 W+ b
$ T3 I* ]) B4 ]7 p, i/ M, I. M
| list-item |
, O* p3 k0 n, p1 M) }" e此元素会作为列表显示。 | . \( Y" {9 m1 b$ d0 K. C* d
6 ?0 D) D# s& y| run-in | # y; }! s) c+ y
此元素会根据上下文作为块级元素或内联元素显示。 |
" q) |6 J, Y2 f; U- X( a
8 D1 r5 U0 U, f) Q7 A| compact | 8 c+ m/ r& V5 o
CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 |
/ t3 k& ^# B% M, Y+ C: J% x" k# w: Y
| marker |
& ]/ A% b6 y( s5 m! p$ T$ L8 R: VCSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 | # w# O7 k" h: E6 s) n2 y% P
, m% Q5 _4 g' W n- c$ P| table | 1 y# T8 _4 y+ s* U3 r% V/ { a
此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。 | 2 r. U9 _% b+ A
" l9 ?7 F2 n& Q| inline-table |
) d/ A1 R4 n- H此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。 | + B" x W, n& } p
0 u8 M6 H1 L2 D
| table-row-group | * [ k% S& a1 b$ v3 z) Y, ?- b
此元素会作为一个或多个行的分组来显示(类似 <tbody>)。 |
W5 c+ M# m/ q8 o) A3 q3 M' P6 j
| table-header-group | 9 x# \% @2 V/ K& Z& r5 F
此元素会作为一个或多个行的分组来显示(类似 <thead>)。 | L6 X g$ M l, P
9 G8 C5 {( p9 u0 y7 Q" l* q| table-footer-group | ' g$ Q; a& C% E
此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。 | ! @# A" |6 o* A
; d+ [( [) ]% q. S| table-row | 5 d: p4 ^7 E- T& H
此元素会作为一个表格行显示(类似 <tr>)。 |
. z" h) A3 p( m- b$ }
: t2 p4 x0 N8 N1 d* [! l| table-column-group | ' T8 W8 T" T B/ f* ~" q: i
此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。 | ' [/ p6 q# s+ N* u/ f8 t; G* L
: V/ f( a* S' @| table-column |
9 F+ y. E# ]( K& g$ t$ I此元素会作为一个单元格列显示(类似 <col>) | * m) t' `2 r7 q
% z; N" C7 q5 m$ ~$ z
| table-cell | 2 J2 N4 ]' t9 V; l
此元素会作为一个表格单元格显示(类似 <td> 和 <th>) |
# }# [' o4 j1 G5 U6 b# K
3 d# o* K; _9 z| table-caption |
" S! n& q2 h/ D- g$ A$ M此元素会作为一个表格标题显示(类似 <caption>) |
+ Z+ ^5 S4 y% T+ U: f' d( G0 L9 `) s& C4 r3 A9 F
| inherit |
0 H& ]% Z) P/ D) S7 m规定应该从父元素继承 display 属性的值。 | |