|
今天做网页的时候刚发现的问题,在一句话中加入h1标签或者h2、h3等,如下:
( L' J, F1 c7 G w7 M9 @ 不<h1>自动</h1>换行 ( l% C& T/ X6 X7 o/ L# V" c
显示的时候会是这个样子:
1 K" u( ^6 B5 l6 p不
* m M: f2 m% R/ U/ Z$ [自动
$ @* @& r+ \4 ~! m9 o换行
1 G/ [ Q7 t8 _$ ?会在h1标签处分为三行,如何让他不分为三行呢,只需在css中定义h1{display:inline;}然后就OK了。 ( j. S( S8 C( F3 V& Y$ i8 _& b
) T/ B! M" q& |& c- ?! G7 k }以下是display的用法和定义: 7 u3 P6 _- f4 I7 j9 @' h
5 J( X7 }) ?/ J3 a; S% F" q/ N' ?8 A1 P g
定义和用法
6 L" d" ^% N0 a1 j% ]+ x* Q. udisplay 属性规定元素应该生成的框的类型。
- W3 J$ B+ F1 ?! Q% D说明$ \2 E( Z# X' g! U
这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML 没有内置的这种层次结构,所有 display 是绝对必要的。
* O; {5 z" n% |3 b# n" j注释:CSS2 中有值 compact 和 marker,不过由于缺乏广泛的支持,已经从 CSS2.1 中去除了。
" F6 h& |, L9 }9 [; D
8 ]# s9 K$ x3 W5 Y3 e3 V' _
7 P' j, U, X; o
S' X, a ^& c1 o: d5 m4 x| 默认值: |
' G# p1 q3 i* i; ninline | ! {2 [+ M' e. Q; \3 n* n/ Y
- W7 a& j3 P. F) q4 `0 D" n| 继承性: |
5 `% m+ X. h& F Z" Y+ k7 nno |
7 `% Z" j( e2 ]( J3 o9 G
% [" ^+ H( {2 _- t/ b. f; h| 版本: |
. D0 {8 d, [+ R5 eCSS1 | 0 z* ?% h+ C2 q* U1 m1 H
7 u6 [0 t% [% U& x9 T7 R| JavaScript 语法: |
6 c2 L" m% }; h& O+ Eobject.style.display="inline" |
2 _6 N8 I( _* d4 e; I+ N% z& f; u
实例
/ u% l5 B+ Y0 q7 j! X8 Q" {使段落生出行内框: p.inline. N6 @; x2 ~, M. x9 V' \
{9 w5 E+ `+ p* P _! P
display:inline;9 @4 [9 M, | s8 I6 E" {4 ^
} , f: f# y0 F" c& i7 P
$ H; v" j: Q) ]+ u$ P$ h) n4 I" E" V, T浏览器支持
# ?4 L3 }7 g; ~. e9 E# H所有主流浏览器都支持 display 属性。 ) p0 ^* B3 U% o; c' 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"。
+ I. s9 R% W+ z9 N$ b! e2 ?) Y8 \& P6 f+ `
可能的值
: G/ X) V9 |, F0 Y! [8 J: N7 I; Q9 X3 d7 @9 i
- x o0 C3 T! R- l9 @
& L1 P- o2 Z+ Z| 值 |
0 u$ c6 G& U( ~& W描述 | ) u0 F7 ?" ~/ I* E' C5 r
5 a) W- E* l7 l) g# Z| none |
8 R# T9 u6 S' |此元素不会被显示。 | 3 E' y! v( |! h [1 J
( p- p. d/ N4 {| block | 3 P. {' {3 B1 t& ?2 C# x
此元素将显示为块级元素,此元素前后会带有换行符。 | . O5 |- o% V* I, Y# y+ B
0 f) w2 P/ I6 A* _2 O| inline | 0 {; L2 J# S" P$ Q. d6 ^
默认。此元素会被显示为内联元素,元素前后没有换行符。 | ( v! c" @- ~4 V7 C7 p8 Z( c
' ?0 q w2 d! d7 h+ c: v( n8 e$ C| inline-block | 7 _& X9 f3 |% [4 |, A) A
行内块元素。(CSS2.1 新增的值) |
; U1 d) @; I8 H. M- a+ Q2 ], O. r5 q1 ~
| list-item | 5 d+ `: ^! K1 l( o; ~' J
此元素会作为列表显示。 |
1 h( N% W* B8 Z. U/ _
. Y1 F5 d7 e, z" X1 p| run-in | 3 R6 C0 D- r& [2 V. d
此元素会根据上下文作为块级元素或内联元素显示。 |
6 l, H d2 [5 |7 E# ]+ c
, D* }# H/ K3 m# `- h" o1 _| compact | 7 f8 n O/ }0 E6 ?/ q" c" {
CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 |
' V' j% C# e s0 z) r0 |0 o% x5 ^
: r5 ~3 H6 S" U, P" h| marker | % V; g- F% S" c
CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 | + Y5 D% u; B5 W1 u, n2 y8 Y- h
% N9 |5 u H6 P- D
| table | ; i0 \& w& t1 W: ]: j
此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。 |
. U4 V; O2 U6 K5 W! o
' x8 M$ _# w( l) [! B; }| inline-table |
! `; v x. ^8 l l2 V) }7 c" k( O; ~, Q此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。 | , f. k. Q# m+ L( u. A
8 [5 M) r5 g" u# H0 u2 R1 _| table-row-group | / L3 w+ Q( W+ N
此元素会作为一个或多个行的分组来显示(类似 <tbody>)。 | 9 l1 W4 x8 T' B4 \8 S5 T. ?' R+ `
& g; d9 {: g. a! `1 G0 w5 ^* K+ }8 || table-header-group | , l% q7 ]3 u, _$ w
此元素会作为一个或多个行的分组来显示(类似 <thead>)。 | % f; Z! m% ]8 m8 l. Y F1 @
& b8 i3 X- B7 y+ ?" M
| table-footer-group |
' l+ R3 M7 H3 Q& R* A此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。 | 4 v5 g# a0 g1 M; B
6 F2 \/ g4 q& r9 p4 v. Q| table-row | # ^2 t J) A+ ]/ f
此元素会作为一个表格行显示(类似 <tr>)。 | % u, {+ ?9 O0 J6 C& A3 M
2 M. {+ i# c% ]: L$ D* F$ R1 w$ |- E9 |% L| table-column-group |
/ E8 ?$ H/ m+ ^2 g此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。 |
6 r. k1 x/ c, T
0 k- L1 ~# s4 G) B| table-column |
3 ~) |. f& r" f$ H+ W* ^此元素会作为一个单元格列显示(类似 <col>) | ) B# s7 G' i9 I/ V( c
4 u* }# e( ~9 j c( ^1 y* l: c8 v| table-cell |
/ @8 I3 z% `" i9 {9 K8 J# f* i5 i* b此元素会作为一个表格单元格显示(类似 <td> 和 <th>) | / p( q# `0 D( u# H9 u
! z+ H* D& z' u
| table-caption | * V l3 H. j" P
此元素会作为一个表格标题显示(类似 <caption>) |
* T2 f1 f4 a0 J: ^
& f" L# [& o$ g& W( ~& a! C7 Q5 h| inherit |
, Q5 U& c8 ^( n' E; H" g& X规定应该从父元素继承 display 属性的值。 | |