|
今天做网页的时候刚发现的问题,在一句话中加入h1标签或者h2、h3等,如下: , i' W9 Q: ?! F5 Q! [- s; l
不<h1>自动</h1>换行 2 o4 n+ v# m. e6 n2 [/ R: P
显示的时候会是这个样子:
2 w" U8 D* w+ [9 p" p2 u不
* [* e- M' b) T `% v& z自动
8 m; w% T, H( r- w4 w# k3 P1 M; G换行 8 Z. O& O# o6 t7 H; d4 a
会在h1标签处分为三行,如何让他不分为三行呢,只需在css中定义h1{display:inline;}然后就OK了。 0 S8 m; l- M# [2 ^, R% ?# l
5 a8 l) L( b' q6 H9 Z7 \6 @8 z
以下是display的用法和定义: $ Z) D: N, U, h5 T: ~7 q
) S$ b, M# ^ q, O% f
$ s, ^2 t) e& e! |! b( D6 F定义和用法$ D# v* q+ t7 r( S0 h' j1 T
display 属性规定元素应该生成的框的类型。
3 B( W0 Y0 e3 _" o, N- Z, V说明% Q3 M# k9 S& W5 Z2 f1 }
这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML 没有内置的这种层次结构,所有 display 是绝对必要的。
. U1 X8 B" c8 [4 H" d注释:CSS2 中有值 compact 和 marker,不过由于缺乏广泛的支持,已经从 CSS2.1 中去除了。
, l, U, c; C Y% s2 p: v6 k0 g- R3 I! P8 O4 G' d; [3 {: j
% ]% P7 `5 \2 G8 J# M* o; [- d/ C! T. y* m
| 默认值: |
3 C: d! E" V" m- D2 P7 uinline | n9 F- z" o* {
0 E& c" U. n. p% G+ ^1 t" M| 继承性: |
, V2 e2 F1 c7 l" E( {no |
c0 T; ^% X$ P/ m
3 o. _( n8 P9 b9 u| 版本: | . N0 X- z, l v% N
CSS1 | 7 h, k( K5 ^, l- a! q) l7 s
0 x( G7 v$ i; t. v7 `; B) f
| JavaScript 语法: | 1 D( j; {! H) D
object.style.display="inline" |
% v) b) A$ G2 g5 ?- l' _5 G: X
( k$ p& E1 i4 ~0 K/ v% C实例) ]7 B) l* E- o5 l# l) ~7 G
使段落生出行内框: p.inline
3 |2 F/ N! M' h0 |( s {
% }8 ?5 b: q* W3 a/ d display:inline;
7 F4 |( y, H/ }% T( n& e } 0 D C. @" z5 n. w
* U0 P' D) J0 _& N& [浏览器支持
( f9 [# X% T7 p- m/ T1 r8 l所有主流浏览器都支持 display 属性。 ! @3 d& S) v: q 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"。
/ c* Y( U& j3 S' x# ]1 i) ]! g4 d+ L9 y! M: p: C5 \
可能的值
7 A7 W8 s# V$ u$ S% {: I) J# {2 n) s: h# D- \) I5 E
6 i5 W$ x$ Q- a- E8 u7 v/ i' p7 X
M' C3 ~0 b! u5 ~, r| 值 |
~' ], N( a! W. G$ Q, }" b描述 | ( @+ w [$ E/ y' ~' t
5 c1 {7 ~) q" R2 B/ [8 [
| none | 2 `" p9 Y* @( _1 \& J% W
此元素不会被显示。 | 2 K% H F* ]# x( @$ Y
0 F2 k9 H: b) t7 n5 L- x
| block |
6 M; @1 s: a+ b* |6 _此元素将显示为块级元素,此元素前后会带有换行符。 |
% D% k1 g# `9 t! b- ?0 [
- M( [% ~: ^( X7 T| inline |
" d, a3 z {2 \& _) L4 o4 B默认。此元素会被显示为内联元素,元素前后没有换行符。 | * h+ Y4 _0 l) ?0 b
8 K# M [) q+ G
| inline-block |
! T7 a% i' F- |! ^1 m+ @行内块元素。(CSS2.1 新增的值) | # t P6 w3 `7 z/ e% C" Q, j
' x3 z( \, p: J( C I$ U| list-item | $ X8 _# K3 M* Z1 N
此元素会作为列表显示。 |
# M$ Z+ [. H( l2 R5 T& T/ m5 O! ^6 r4 H. H4 B% J2 E: h
| run-in | 4 k) L3 P [ p& y0 A
此元素会根据上下文作为块级元素或内联元素显示。 | ( \! Z* M1 E; D" p4 }9 x/ C! X1 P% s
, g: c& A/ r+ P' c0 ]$ {! u# a2 s
| compact | . Y |( N* H3 O4 B0 h4 M9 N
CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 |
( n. s# H/ K* a- m
2 i3 O' K2 I( V4 U2 ?( F| marker | 5 U4 @" L" i4 e7 q
CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 | 5 h" g) j, \* u; f5 r
8 s3 k7 F; [0 N| table | 4 ]9 U/ M: |0 }8 J3 c
此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。 | " |( r) _" E5 |3 Q/ ~) i
1 q& F9 P" Y5 q9 `* r* U| inline-table | ! \# Z1 a, u1 s* v3 Q5 @' N# C
此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。 |
7 ?2 m" g$ U+ ~) ^' `# n! {% U' T5 ?3 t! L" W
| table-row-group | ( Q' [0 P% R( u
此元素会作为一个或多个行的分组来显示(类似 <tbody>)。 |
2 H) H- ~6 i1 k1 H0 P; T. I \
b& M5 r! k7 j% V7 [| table-header-group | " N0 y; G7 g8 V
此元素会作为一个或多个行的分组来显示(类似 <thead>)。 |
8 J! p. a3 S) E; v
' u0 ?7 i/ i5 j# u! P| table-footer-group | ! w. l5 j9 k& f5 n; {& E w/ w
此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。 |
2 n5 A% i; t4 X# J8 G6 W# v
$ ]0 u" h9 y3 r* Y' d j8 `| table-row | 0 j6 e7 X$ i; ?0 g |9 v% L. W2 V) G
此元素会作为一个表格行显示(类似 <tr>)。 | 3 u' i1 q" h: t8 U5 c S1 ]. T4 U
v. J; m9 d& \! G0 L& ? R
| table-column-group | - y O+ w' K! P% ^, w7 t/ \5 l2 D
此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。 | + ~/ Q2 i$ a# f; F! m: F f
; `% o1 Q" _9 z; ?$ P( R
| table-column |
- S* V- {! S0 W* B此元素会作为一个单元格列显示(类似 <col>) | 7 u' d3 L7 j% [2 d, y; r( ~
1 L, Z, F9 n. @* g! V, s' v( @
| table-cell | 7 {) f0 Z$ g, I i1 o( N
此元素会作为一个表格单元格显示(类似 <td> 和 <th>) | ( B2 y! W `, P7 U7 `- z# {
9 L+ }; ?, D) j7 H- T
| table-caption |
- }) t- l% [8 a! I6 m+ @+ A此元素会作为一个表格标题显示(类似 <caption>) |
( W: [) e7 M7 c; n+ M* P9 Y. {. ^1 k" K. U. H& k+ |
| inherit |
4 |6 l. s7 l! W+ d8 j规定应该从父元素继承 display 属性的值。 | |