|
今天做网页的时候刚发现的问题,在一句话中加入h1标签或者h2、h3等,如下:
4 ~* [5 W" N# ^' i3 M$ W' p! W1 f- t; K 不<h1>自动</h1>换行 . k' B1 y9 u3 e9 }( @
显示的时候会是这个样子: & h; M1 Z- V( }& ^ ], A2 n
不
& z& E) v% e: I- Q6 z自动
# v' O( l$ i) O& u4 N换行 & t7 y3 x0 x% u( }( B
会在h1标签处分为三行,如何让他不分为三行呢,只需在css中定义h1{display:inline;}然后就OK了。
: D/ i: {( g) I2 U& ^3 w, X 6 X; J/ U: a. l% A( O" [) J: Q
以下是display的用法和定义: 5 N& l5 ?* s% L L: y' i x
9 N6 {1 _8 q* ^( o! C( Q/ v
# W# i5 p7 v4 s( ^' f/ ?2 r! G( b定义和用法
5 f9 m2 {0 R, ~3 D' z& Z. idisplay 属性规定元素应该生成的框的类型。 0 Y+ g1 D0 N4 m; n
说明4 {/ o+ V6 P5 j9 V1 t& x7 p5 S8 _) v7 t% T
这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML 没有内置的这种层次结构,所有 display 是绝对必要的。
3 o. T% g1 j, P7 W8 w+ _注释:CSS2 中有值 compact 和 marker,不过由于缺乏广泛的支持,已经从 CSS2.1 中去除了。 ) Y/ A; n/ R3 v
1 ~. z1 A' N* j8 n+ L0 C8 ]3 j( I9 P+ }6 ?* k: ~6 U
3 s0 D) H* I' s; D1 B$ s# n' t F
| 默认值: | & r, O2 ~: Y- N
inline |
8 ]" x% b4 z. I- c3 m
4 u$ y- R- U6 F& j| 继承性: | ( x* s" s4 L; J
no | 8 w1 G9 L" E7 }( `2 g
: p' J9 }: _2 t8 |: z! Y8 K3 I6 B! G+ W
| 版本: | 4 E) h, n9 ?1 s4 C
CSS1 |
, `8 ]; u% k) B4 ?! M+ s, M% n
5 @0 u: H3 c1 [| JavaScript 语法: | # [; i- T l: o
object.style.display="inline" |
% F+ o0 \: Z$ r: A8 v- {0 t' {& j$ l7 X
实例
+ F3 @: q% N0 C- s使段落生出行内框: p.inline
2 O3 E* G7 H: Q, K3 F, k X {
! W. c- D' `& k display:inline;8 D0 v& ]* ?4 ~7 I( p
}
4 n( j! f+ e7 B! J; a1 c" d, z- a
/ W F$ M" h7 \- q! T9 K( P( S7 |浏览器支持
; C' ]" @ z3 K所有主流浏览器都支持 display 属性。
; P7 p; v' M# i% x d2 t( B; q& |注释:如果规定了 !DOCTYPE,则 Internet Explorer 8 (以及更高版本)支持属性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及 "inherit"。 . X9 w. [/ k) @8 `$ G
4 @) `5 m0 L- D0 o) N% ], p( C4 H可能的值
' M% l0 ^; c" z% @6 I
5 ?: I# [# G6 G3 m& u9 b
2 ^" X' U1 `/ ` H1 i: p8 k! d
, k. @$ ]2 k7 H3 B% V: f| 值 |
$ i% ]: j$ A7 l/ r! A描述 |
6 l/ f7 L' s( P- }2 g' j
( U1 o6 V& h* x7 H| none | " U" i6 G6 q/ U
此元素不会被显示。 | " P: M2 T. o2 d2 S, v
8 i6 ]. d" c8 k8 @( |
| block | ; K0 U9 |, N Z2 ^; n& R" _
此元素将显示为块级元素,此元素前后会带有换行符。 | 0 N9 f4 C, O4 W! f' q2 Q o
0 a4 `$ l, d& {
| inline |
+ e& L/ [; H7 B& | [0 |默认。此元素会被显示为内联元素,元素前后没有换行符。 |
# Q4 ]: m6 W& c- B- D2 b, R4 L
- L1 C) ?2 \: |4 |- o; z8 ^| inline-block | , d1 _% X; f& \
行内块元素。(CSS2.1 新增的值) |
8 f: g. K0 h2 R6 B# l$ k6 x( B
; W9 z! K2 }# S| list-item | 8 ]0 c: A0 W+ C8 e$ _% N$ s5 X
此元素会作为列表显示。 | ! h+ z/ J/ m Z |1 T9 S, A, o
' B3 ?3 o1 D" H( ?
| run-in | 2 e( ^# X8 T. S3 W& @4 h" i
此元素会根据上下文作为块级元素或内联元素显示。 | . M# W# g z) p0 j( I
7 V* @6 R: k' x7 }# [ T& f| compact |
. q( l0 z9 V4 t& J! F/ lCSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 |
. o' U+ k) H% K+ P% m% ]
# C7 G! [* M9 c# A| marker | 1 K; _2 H$ g' y: I
CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 | - {* b, E7 Q4 W: T5 a( R% n5 E, @
9 H1 K% p# ]3 z! b. j| table |
+ d; G5 L. q6 \* A此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。 | 2 ^0 p# A# L; }$ C$ r
( S! I; e. W! z: Q T5 I/ T: f
| inline-table | 0 C9 \4 H4 j" y% b/ O! S8 A q, J
此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。 | 7 N8 ~, v+ l3 J$ o- Y) F |. G
7 p$ [, R% a- V4 ~+ q% N; \2 s5 h8 X
| table-row-group | 3 n4 g/ B6 C5 U
此元素会作为一个或多个行的分组来显示(类似 <tbody>)。 | ( h4 B* D& s, V6 A& x9 [1 f. e5 F
5 n; R- P/ ^: V9 P' T9 E( S| table-header-group |
8 x$ k# I$ N0 X# [# {. [此元素会作为一个或多个行的分组来显示(类似 <thead>)。 |
) |& ~- ~( A# u9 P7 q4 C% d# n2 E1 {
: V7 D% `. W6 Y) C V( m| table-footer-group | 0 ^, j& ?1 ^# }( k
此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。 |
$ F/ W1 r' W+ W7 `; v0 ~% z. e+ b2 o1 t
| table-row |
O [8 f. M% k) k& V此元素会作为一个表格行显示(类似 <tr>)。 |
9 ^: `/ p; P+ Q! y7 R- T. I1 w' ^; l% }6 ?' O) |
| table-column-group | 9 L2 `# U3 ?' p! c
此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。 | / H% ^ g2 R$ n( e; p( w
8 E4 Z' ^6 t' f, i- k ] j0 r# m; C* Y
| table-column |
, Y( H$ c3 `# W) U此元素会作为一个单元格列显示(类似 <col>) |
) J7 j! J4 ?9 s: s% m# T
0 S0 [) |0 W+ O! ]" D| table-cell | & h& _2 G9 E" e; ~6 p, M8 z
此元素会作为一个表格单元格显示(类似 <td> 和 <th>) | 3 y! n& b1 R m* K$ U
$ J' X) A5 z, s6 g- a
| table-caption |
4 j% D: z. W$ ~+ L, j此元素会作为一个表格标题显示(类似 <caption>) | / I* L* R+ s5 s
; y; J/ K6 Y- U| inherit | : ?6 m* u5 S& h" A8 n! \
规定应该从父元素继承 display 属性的值。 | |