|
今天做网页的时候刚发现的问题,在一句话中加入h1标签或者h2、h3等,如下: 7 v* h, U9 A6 M# n, l) R
不<h1>自动</h1>换行
" w. m1 R% C* y. o* m: u 显示的时候会是这个样子:
7 [" W. y8 Z* F i* F不 ( }; W: `- t( I# c9 o0 r& n0 ~1 Z! `: ^" L
自动 % H& u& Z( ]# ^& x
换行
2 m1 [+ t- `! V& |& g W会在h1标签处分为三行,如何让他不分为三行呢,只需在css中定义h1{display:inline;}然后就OK了。 : d+ e3 M; }6 {3 X) }/ m$ G: t
1 T+ X! p& X8 ^' S以下是display的用法和定义:
/ `0 i6 A- x# } 1 ?* S/ p J) f7 t: e+ y3 {) [2 v
+ B$ r( S( A& R. z定义和用法% [4 w6 }2 b! r5 T. z
display 属性规定元素应该生成的框的类型。 0 L# m8 b, n+ l9 @" ^
说明' a2 ~0 j4 g) ~! c
这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML 没有内置的这种层次结构,所有 display 是绝对必要的。 Q) Y! |/ O) k- E
注释:CSS2 中有值 compact 和 marker,不过由于缺乏广泛的支持,已经从 CSS2.1 中去除了。
% [! v5 S0 ]+ X; n- N0 f1 C7 J$ c' {' T* S0 ` }" T7 S
* F8 \5 H3 A: N% F7 d) H, S- Q6 x0 Z
| 默认值: | / ^7 F2 K4 l5 {) c1 D7 V, R
inline | " n% c" a5 [' V" i
% q8 V, z6 J9 y* u: P. z| 继承性: |
) P( \& a4 h: e- Lno | $ t. g: i) h0 ^
8 t, Q; I; _; [/ p8 e+ w+ t
| 版本: |
! q# n: c! D1 X5 h- Q: \CSS1 |
2 m( C5 H; m$ f3 R/ b }+ ^0 ]: i
: S6 x1 W# k( M3 O* S| JavaScript 语法: |
$ f, A; m! l4 O b" ~object.style.display="inline" | 6 o2 g# ~8 ~5 G7 S5 @/ J! i- Q
! }. {8 Q6 @9 Z# |实例* q- d. C I0 q4 s4 H
使段落生出行内框: p.inline& I$ D/ U+ I1 \1 l4 m
{' j5 f1 t. r! x# n$ g) O
display:inline;. Z5 t# ]0 r7 r& p& n& x
}
# d& O8 x& ~8 c8 l( l
! s% S5 j5 a/ {- ~; ?1 ]浏览器支持9 n& e) d8 z/ a/ z6 p
所有主流浏览器都支持 display 属性。
0 E/ p% w7 C+ n* {- G! G注释:如果规定了 !DOCTYPE,则 Internet Explorer 8 (以及更高版本)支持属性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及 "inherit"。 ( | w0 v) g, A0 c# A4 G
+ t% m P3 {5 x# E* o可能的值
. {$ T2 h, \! J$ F: z N* {% b+ Y
% r; O5 {- e6 \% O+ H* O5 ]- ]1 D
) f! y6 h% W, y* f( o| 值 | 5 p1 i: Q7 m7 I+ I! d2 L/ g1 s
描述 |
4 R$ C1 i5 O5 k4 t* q$ {1 U, v6 C# c7 }* k; _
| none |
& q/ ~3 r0 ~1 a& w此元素不会被显示。 | / A1 b# Z! T: G" b+ f' |
0 Q: [- z4 H9 m) }- z+ K: a* M
| block |
4 d' Z7 ]. [2 [2 H& z此元素将显示为块级元素,此元素前后会带有换行符。 |
4 u0 B, g6 z; w) h6 Q; t, {) u# g* l0 h
| inline |
. a; D {1 Q. P: Z# ]* S默认。此元素会被显示为内联元素,元素前后没有换行符。 |
# I/ g( t6 e1 e; Q+ z7 \1 W/ F, f$ b. T' `5 T6 ?" A
| inline-block |
2 Y% h/ F# |, y( K, ^行内块元素。(CSS2.1 新增的值) | ; \- o6 V7 Z" n6 }; u4 ]% f6 K
' h. @- y# S: F2 {! G, o| list-item |
$ ?/ L" L5 L; t! F此元素会作为列表显示。 | ) }+ T: J/ S" ^
+ d1 \# d9 M- j/ Y# a% Z( c
| run-in | 0 Y" F' n V0 f2 B t/ U8 r, a( ]
此元素会根据上下文作为块级元素或内联元素显示。 | ) I9 s. M2 J! h% K+ [8 r8 Z
9 z6 m. j) G" d5 f$ u6 i
| compact | 8 r% X) Q& ~7 X
CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 |
8 h* k% C) B+ @/ i2 N Z: J5 F4 D% p8 Y' c3 { _9 _
| marker | " k: u0 V. w) Y8 c4 j* {9 R
CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 |
: F C# j; k8 I& G& o4 [3 r5 Q0 k5 U1 y+ z6 t
| table |
9 x5 M! ?. V- x1 h此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。 |
4 ?4 f& Z, v$ j7 O9 F, f6 l/ ~" k+ L2 p. G3 ]
| inline-table | ) u6 Z+ Q& ^) l r! |
此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。 |
. Y3 c( h0 O# f/ u
5 ^" i; @# i5 Y! N3 B: v* i| table-row-group | 5 f8 P/ c5 o# P9 I4 D' a
此元素会作为一个或多个行的分组来显示(类似 <tbody>)。 | 9 }2 U5 k! c9 f# R
. [% d$ L$ a( w! ~1 o( J0 ? A| table-header-group | ) r, x2 e3 g- @2 d
此元素会作为一个或多个行的分组来显示(类似 <thead>)。 |
" e* ~8 c4 D0 d
- _ }5 \; F' |. D' h| table-footer-group |
) x) S+ v9 {8 f: Y- `$ d# M4 J此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。 |
' H# B+ ?% Y( e9 R! O7 u3 m0 l$ H1 H% e ?7 X
| table-row | 3 M* p0 Q0 f. M, ?* N) r& O, C
此元素会作为一个表格行显示(类似 <tr>)。 |
, S/ H* L, W, u0 y( i
7 F' _7 N" m/ @6 V u. B6 N* B, f3 D| table-column-group | . S0 L1 o+ k5 X& {
此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。 | $ M# I" n1 p4 m- @+ d' V) N
- x" q. W1 i+ ^( c/ j$ d% @/ d| table-column |
; S& e3 L0 A* n+ p# d5 _' E此元素会作为一个单元格列显示(类似 <col>) |
P- z$ s$ d- d+ K' e6 Z0 {$ c- m# ~4 W
| table-cell | 1 T' z$ J; V: {: c8 K5 Y
此元素会作为一个表格单元格显示(类似 <td> 和 <th>) |
* X# D' S/ u0 }; k$ O8 ]$ S- ?! S) |3 n8 Y) C
| table-caption | ! A' M/ O0 G* \% x
此元素会作为一个表格标题显示(类似 <caption>) |
' H; u3 H. w6 G# P, S+ k: \4 d% h9 I0 V: ~# I
| inherit | * H7 P! _& V3 Y7 B4 X0 W
规定应该从父元素继承 display 属性的值。 | |