|
今天做网页的时候刚发现的问题,在一句话中加入h1标签或者h2、h3等,如下:
- r3 D, V) ^& h% M1 m 不<h1>自动</h1>换行
# L o$ c+ ~8 J" s 显示的时候会是这个样子:
* G" Q: [6 j& D不
- k4 S$ _ V' F# {2 \自动
2 O/ o9 U2 d; ?$ A+ v8 G. W1 ~1 h换行
* d# e$ J' \+ u& j! j+ s会在h1标签处分为三行,如何让他不分为三行呢,只需在css中定义h1{display:inline;}然后就OK了。
`9 k+ V! K4 E% h+ u6 b) q) ?
8 ~* E+ B7 y$ H7 ? t6 p8 S以下是display的用法和定义: 9 ?1 Y: _3 W n6 L! J Q+ u
/ t1 Z/ h; S" _8 t! m. x9 s# ], b1 _9 `* {
定义和用法
) @5 O3 t' H" |7 s( Tdisplay 属性规定元素应该生成的框的类型。
$ d+ G. M4 z% }3 E4 ], g& i说明/ ]1 F' r; K6 P e& Z. ]
这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML 没有内置的这种层次结构,所有 display 是绝对必要的。 , ~6 E$ J7 h6 X1 [
注释:CSS2 中有值 compact 和 marker,不过由于缺乏广泛的支持,已经从 CSS2.1 中去除了。 . h- V% F: p$ x' l& K7 x. a% _
U' `7 T* |+ Q4 S( u" @8 L' u6 X9 S. R, s: u! b+ ?5 A
1 E* K5 v1 F2 a7 w; T9 I3 r| 默认值: |
! S& K# W" b2 j- d7 Iinline |
4 A! d: U7 h$ H( p% b' j$ R p! J
; Q" J' x: |+ J# K| 继承性: | # L$ r! H0 M; O
no | 9 _( O' ~- {! ^6 Q
`/ R; D9 C5 U% j| 版本: | - y# L8 ?# ~6 } X" n* ?
CSS1 | ! j# A' J9 J; B
* H. K! N; j2 b" D( _0 e# ^
| JavaScript 语法: | . ~# L8 v5 I7 L
object.style.display="inline" |
' W+ Q2 E, P; i, ^- c, P
& d; S" y' S D% k( Z# E5 Y) l实例2 L* @' [! H1 t3 c+ E
使段落生出行内框: p.inline' x% g" Z4 b( g. M8 X# R& ~6 ~) v: _
{9 ]) f+ B' ^9 h. P4 V
display:inline;. g* i4 t2 B$ e6 t- D; l
}
8 _1 ]. L: i6 Y: P2 ]6 e
8 F" e0 Z) `( a浏览器支持& O- M& j ?2 F7 s1 T; t4 P
所有主流浏览器都支持 display 属性。
6 g6 ]$ d6 u1 ]注释:如果规定了 !DOCTYPE,则 Internet Explorer 8 (以及更高版本)支持属性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及 "inherit"。 - Q/ H! H6 V2 d p7 C D+ S3 ^
$ M- Y. d9 _# u) G* t2 R7 m* R可能的值; R( y, s0 s" u; E/ N0 s
: }* r/ ^9 N, H. C- i- R# N6 O' q
# }: d/ B* _3 X; _, y. q$ O4 e: g. w+ B5 M5 S4 N8 E k
| 值 | 4 L! \6 ]2 m' q' k: M
描述 | , T* \$ Q6 Y/ i
: i* ]+ M* \9 ~
| none | . a+ B9 d# V0 h, P5 p! k' J
此元素不会被显示。 | % ]1 u9 f2 T* ^/ S
5 Y8 o0 `8 H: B. g| block | 6 _/ s- S6 {' x( w, o, C
此元素将显示为块级元素,此元素前后会带有换行符。 |
$ i% c! M* d2 Z3 E9 S; [" a
( u& E# ]" A3 }6 s7 D/ L| inline |
9 T9 ]3 q2 f- Q' H7 v$ V# F1 X默认。此元素会被显示为内联元素,元素前后没有换行符。 |
2 Q) v( v9 T% {! ~% L& P. u
: R5 W* L% z+ { v- t| inline-block |
, d# e, [! M3 ?, k& b9 P2 I行内块元素。(CSS2.1 新增的值) | 0 e( H; r# K) W9 C- f# W
; U; R. V) z; s8 V z: p
| list-item |
- q Z. E8 k* g) j2 z4 R5 O; d( Q, Q; `此元素会作为列表显示。 | 8 U7 L ?5 O) r0 A {1 L
9 ]6 N5 c H4 F| run-in |
- z: O: G6 E9 \此元素会根据上下文作为块级元素或内联元素显示。 |
* @9 D5 B$ s2 h4 P
2 E0 y2 a0 J5 u: b8 u| compact |
u/ L$ t4 w: p1 W! ^3 PCSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 |
$ h4 i+ t7 }, ]+ ~/ G5 }* a; K
6 [# p% ?7 h9 i| marker | & p1 |3 @& G: A7 j4 W, y" s) O/ E6 ?
CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 | }+ d2 d2 d" ~1 y) @
' s4 j/ t) F# @7 J
| table |
% ?. S" e, K9 d0 K8 P/ W2 i# ~此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。 |
8 v) E% R$ A9 {; {6 T) G8 x( a9 B) w! h0 W. U; S
| inline-table | 9 w7 N' e$ V7 N ?0 [( J. O
此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。 | 6 e6 u/ N& X7 j# b% N& u
' E: I A2 G. A4 ? k/ W# n| table-row-group | 1 U9 n. {' S$ X, b
此元素会作为一个或多个行的分组来显示(类似 <tbody>)。 | 6 b* `: t8 |: |6 G8 J" G; o
2 w) }; m6 V6 N: E5 |, g
| table-header-group | 0 u1 L; F- r( J4 B$ I" g, L
此元素会作为一个或多个行的分组来显示(类似 <thead>)。 | 6 k0 ]* |) u1 P. W. h1 r1 y% ^
+ i4 [9 l% X+ q- ~0 m! a6 l. Z| table-footer-group | % r% V" |* H" N, U" S+ S3 G
此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。 | 8 |+ |, I: M- H' P6 b+ F- J' l' R
8 f `, N) g$ [' ^- Y5 l
| table-row |
* N0 ?' D: }+ H0 ^此元素会作为一个表格行显示(类似 <tr>)。 |
1 ?( d/ O6 R" e- J$ M
- |8 J/ v/ \- M' |+ O| table-column-group | ; J+ K2 @ b* M p, N7 T& a6 X
此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。 |
; o3 X4 K& f1 B
' U, D3 K c: s" Z& y$ B. j| table-column |
1 p3 c( \" U, V+ p3 c% f& h此元素会作为一个单元格列显示(类似 <col>) |
+ N: N% u3 `9 L8 N+ Z+ J) {* h$ N: v) R9 G1 M8 P2 f' C' m
| table-cell | 8 e1 f7 Q( R- n7 N7 K
此元素会作为一个表格单元格显示(类似 <td> 和 <th>) | 4 K( u4 H) }# q" p( w" Z5 C- D' ^0 ^
$ j- Y6 r6 o+ t1 G7 i| table-caption | , C( M+ \7 g% i: ], w* }
此元素会作为一个表格标题显示(类似 <caption>) |
8 S+ V9 N1 f' {0 |+ l v* V8 z2 R& a: Z
| inherit | 2 ~0 V9 p1 a9 B8 E7 F' k2 J
规定应该从父元素继承 display 属性的值。 | |