|
今天做网页的时候刚发现的问题,在一句话中加入h1标签或者h2、h3等,如下: ' J2 k/ w3 Y) s
不<h1>自动</h1>换行 ! ^+ s8 W: d$ M: `$ W1 ], H0 [
显示的时候会是这个样子: ' Z$ N4 [5 ^+ C& t. x4 ?8 I7 R
不
) d) x; ^' I, e" r) [& v自动 ) p( n3 G) ~/ n% m+ K
换行 ; V/ i$ ]4 x* U8 }& M/ ^7 l
会在h1标签处分为三行,如何让他不分为三行呢,只需在css中定义h1{display:inline;}然后就OK了。 , ^, w; Z$ H( p0 p5 p# N8 x5 f2 _
3 f/ M& s) Z! y) l以下是display的用法和定义:
0 U! E0 q# C( r: l |; X0 G5 G
5 H* w, R% E% l3 h2 k1 L C, J% ~+ L, C1 C |. Q0 q2 V+ v. J
定义和用法
& y7 O/ p Z: @0 sdisplay 属性规定元素应该生成的框的类型。 + F) \* }. S1 A7 d
说明
. A2 I' H* i8 z这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML 没有内置的这种层次结构,所有 display 是绝对必要的。 - c8 U" f, _. P* g. b! z: [1 C
注释:CSS2 中有值 compact 和 marker,不过由于缺乏广泛的支持,已经从 CSS2.1 中去除了。
* i" u" M9 a* Z/ z* ~0 x- H
& I( e( M, K# b% m0 m6 n7 o. L( X# e# `
& x; n2 [) X8 q0 |: _) q
| 默认值: |
; l0 e" u8 Y1 ~inline |
# P$ K( B, h& s: Y8 q1 @7 D
8 J5 N: v p* m3 X. q| 继承性: |
: j7 n }- G f1 r* B8 vno | - Y' k- i% O, B k$ {: j {
0 `' S: q) o& _2 z
| 版本: |
3 u- q1 A! W" ]0 d+ k6 a7 ]& ZCSS1 |
* k) T8 x" P4 s3 T3 X7 X% r2 P' o5 W* n j! J. p! Y' F; `
| JavaScript 语法: | - O. T- H/ h: x3 o: t, ?
object.style.display="inline" |
! o$ L% a* P4 Z9 _2 P/ c1 F; A6 y0 g4 V
实例
- b' z. G5 n8 u使段落生出行内框: p.inline! J8 l+ f$ i R9 S4 B1 g7 o
{4 t) B7 z7 p% {
display:inline;
0 h0 k& D* `2 l9 ] }
( ~: u; Q0 _" Y: f/ q1 C: k: Y7 C+ X. h. |
浏览器支持
+ z2 B& H: N# B7 U( J" l所有主流浏览器都支持 display 属性。 $ K! b4 ^& s0 _; Y
注释:如果规定了 !DOCTYPE,则 Internet Explorer 8 (以及更高版本)支持属性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及 "inherit"。
8 W& N- P* j( n+ W2 F' [# H& G6 h. A; V9 P/ ?/ y0 r& m
可能的值
* @0 Q) x9 h, }( s7 |+ F
& {, n7 O* b# M; K; L
+ S. t0 M1 m) U% r9 y" o( z0 X; p/ R; k0 [" q. \$ G5 s5 T4 N) i
| 值 |
4 E. a! D: }6 z2 v) ~) K3 m, Z描述 | 0 R0 E: i% t, w- k/ c( M
" J& Q( Z8 ]# Y3 H1 e, ]0 R/ E4 D) ?% u| none |
; f% \% ~2 O0 N2 c此元素不会被显示。 |
, _8 M- t3 ]4 x0 h3 _( Y, G5 |/ R# X5 J# C' a* S' d4 W
| block |
9 ^- Z7 h+ b! w9 E/ t此元素将显示为块级元素,此元素前后会带有换行符。 |
" j# U# C- D w" w2 [
# z9 |. j2 t/ g; x4 |9 x| inline |
9 S) Z: k8 H; s默认。此元素会被显示为内联元素,元素前后没有换行符。 | # G, @6 ^) G6 O& t, T9 y _3 ^$ F
# Q" S* q3 [* g& G| inline-block |
1 _& K7 M; a$ H. N行内块元素。(CSS2.1 新增的值) |
0 c2 ~2 @& `7 v+ Z4 b2 Z# D6 o- [3 c- S: i% w* @
| list-item | # w# F! `. ]- p
此元素会作为列表显示。 |
2 { x2 u# s( ^3 i
; D, m: G2 j9 j: n| run-in | ! ]! f9 A5 B1 N9 k* c# ~
此元素会根据上下文作为块级元素或内联元素显示。 |
( f5 k1 L1 B5 S9 j1 c, N; K: A
8 X* g$ k+ S! N0 M| compact | 3 ^9 z7 {) c' O& H3 F$ l \
CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 |
4 c3 A' n1 y c; R' j: W2 W, y" K5 j1 w& S. [; Q/ h
| marker |
+ G- M& D- @ l5 C$ K0 o5 dCSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 |
0 a$ U3 [* k& S1 W3 t2 {7 b% X; @" S# S0 V4 o
| table | - t: @/ S) c/ V7 t$ V% m+ P' S
此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。 |
. l9 y" Q7 o! u9 k6 q4 L2 `
) R% m G6 q+ Q: i0 j| inline-table | : f+ m; `4 n" }0 I- x
此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。 | 7 C8 V3 B c+ P
) t& O. ? C' {( J
| table-row-group | 8 m" O1 D8 w+ X& X5 B
此元素会作为一个或多个行的分组来显示(类似 <tbody>)。 |
: B- X. I: n7 i. [
, B X- G+ S/ k& |/ P* T| table-header-group | + u5 z6 x- Q Y4 J
此元素会作为一个或多个行的分组来显示(类似 <thead>)。 |
/ x/ {4 ^$ G3 n: ]: B& o3 |+ J+ I: n7 Z& D
| table-footer-group |
) f5 r8 a6 d: h3 B# O9 g此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。 |
4 V; m9 j# B+ Z" Y4 B, Q" a6 S- ?
4 f9 a/ q! ]! M% \3 n) d+ N8 p| table-row | ( I2 E R( Z9 z% q4 [8 x
此元素会作为一个表格行显示(类似 <tr>)。 |
7 E+ F/ A$ P$ {0 F' U; K
- F: d; H; c" p| table-column-group | 8 W3 |, ?, r- r$ Y2 s
此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。 | & w7 p7 p T# e) A5 X- ^) @) t2 [
3 k: e0 l6 B E! q* w# L
| table-column | & }! g# @+ {1 A- K
此元素会作为一个单元格列显示(类似 <col>) | . f8 S- u4 n o5 e
# D4 h6 q% c: r2 b; t5 X- w| table-cell | * ?; G3 \8 j% e# h0 P) Z
此元素会作为一个表格单元格显示(类似 <td> 和 <th>) |
0 U6 u4 E6 v! q: t, N) u2 N. F5 Q$ N1 ^
| table-caption | # O1 w" X% J. v
此元素会作为一个表格标题显示(类似 <caption>) | ! {) n, i- c$ Q9 ^ i N
. Y2 T5 j% L& h. ?- N! |& B6 E| inherit | 5 e& | ~' `5 e, g% g( K6 _2 r1 E$ P8 U
规定应该从父元素继承 display 属性的值。 | |