|
今天做网页的时候刚发现的问题,在一句话中加入h1标签或者h2、h3等,如下:
2 g9 k" b7 Q; y/ {4 Y: H 不<h1>自动</h1>换行
8 ` k+ B* h3 k 显示的时候会是这个样子:
& m2 T; L7 ?! X不 * p6 G6 g* D( A9 T% J8 s! Y
自动 , O! \* R' {4 Y+ C' d
换行
5 _. K' T5 ^9 e! Y$ R, G会在h1标签处分为三行,如何让他不分为三行呢,只需在css中定义h1{display:inline;}然后就OK了。 & Y+ J, M' e( k6 S6 T% Y! [( }7 l
4 a/ c% z0 O7 r' k( P# d8 ^0 O6 X+ V以下是display的用法和定义:
n! Z3 a2 s1 s& h. V3 E & A7 P& [- R' T, d8 e" E G: S9 X
7 j& Z' ?* o# u* i* [* Y+ `7 b定义和用法9 J; K g" F9 A; [3 I3 C0 c" a5 ~1 C2 i% L
display 属性规定元素应该生成的框的类型。
9 Z, U$ I# U7 o$ `% S说明
- q1 u% U6 [ I3 U; [/ t# D这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML 没有内置的这种层次结构,所有 display 是绝对必要的。
: W! j0 c( u" a8 b" V; ]2 a, B7 e/ T注释:CSS2 中有值 compact 和 marker,不过由于缺乏广泛的支持,已经从 CSS2.1 中去除了。 ) k* M* t8 [5 f/ j
) @& j: N8 [$ z w2 T: h
* t, Z( A) I( _
; f/ `2 I* k0 B% t- G7 s
| 默认值: |
& ?. i% X W) F! p' ~0 kinline |
4 q1 \5 E( M8 e" M+ L6 l3 A3 i. H6 J1 C9 m5 g+ ?
| 继承性: | $ g( X6 ?& U' ?! [, F
no |
' w# [8 X6 ]# D3 p+ y, n) {2 R+ L" q0 Z& d$ I n J) R
| 版本: | : c, i& r% g% a( Q3 ?" K
CSS1 |
* v3 }+ h# k2 ? q( J9 |7 a8 C) G+ v3 m7 ~) x
| JavaScript 语法: |
+ P5 k6 I% S! }/ k& a% |object.style.display="inline" | % N( A$ I1 I5 w4 ?5 v( T/ Y
# f6 _# @: ]: @1 X1 B. V5 R* Z; i
实例
2 N' y7 l% R- |7 g9 X使段落生出行内框: p.inline- E' M' g9 v" t8 I+ h5 d: t6 i; C
{
4 e. i: i1 u% C7 g) x( v( k0 i display:inline;
" ]: D- q3 C" y( V0 M }
5 l6 }6 ?6 f$ Q+ C' J0 ^( Q: y8 z' d
浏览器支持! W0 i* l: R0 u$ p! `0 O$ {; e
所有主流浏览器都支持 display 属性。
) p# w" s$ r( {( o7 Z注释:如果规定了 !DOCTYPE,则 Internet Explorer 8 (以及更高版本)支持属性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及 "inherit"。
& m6 Q: u5 B( Q Z5 B( Z/ {: {( [1 p
可能的值
( ^ T) D& b( W! r& X+ i; a5 B/ A0 |1 G) i6 v, O4 M
P' [5 p$ `6 k# l
# {6 ?4 _$ V* J5 x| 值 |
/ ^, `+ [* h r5 Z1 Q描述 | ! Q( T- U( ^ a4 y# K) s% N) @
; T( X& A: N5 h0 G5 }% k| none |
+ d1 w( W7 |) _, n4 Y此元素不会被显示。 | + o* D% l" E. t- o! Q; t
* C- {( R( ]8 Q4 ~) }) x
| block | & A- r& a* R6 v( Z* s! K' ^% @
此元素将显示为块级元素,此元素前后会带有换行符。 | ( p! v5 o: L) F+ L0 m( [
# h6 k! C# f! q' W( C V: e. J" p6 A N| inline | + z: t/ w$ O+ h- k
默认。此元素会被显示为内联元素,元素前后没有换行符。 | 2 K9 j$ |, A1 h1 |3 d) ]
`7 @. |$ y B) d' x% F. @: j
| inline-block | 0 c2 s- H. i* i6 W4 _
行内块元素。(CSS2.1 新增的值) |
1 j, Y- B) t4 J) u0 q# L; y9 V+ w1 R+ U3 z" ]
| list-item |
8 z- U" {8 ?; I& t1 I0 g j- a# ^" C此元素会作为列表显示。 | 2 K7 m7 `4 o2 V7 b* u
7 ^" R- ~! Z' W2 \* e7 h| run-in | 8 ^# v! M7 a2 g: i) n; |3 q# E
此元素会根据上下文作为块级元素或内联元素显示。 | 9 t: A& a0 u- x9 ]& x. f: ]
2 \* \. }- V2 [# y" V| compact | ; r, |- I6 `% p; x3 I. O
CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 | " r/ Z/ Y) E5 Q
; F; A* Z) O. r* u2 a4 v| marker | , D& P: E% K) `* [% V. y( i
CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 | ; Z _8 _/ K$ c# J
$ a0 E8 }! @# E) q; I2 Q
| table | . Z# v1 M2 _5 O9 b9 L
此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。 | 2 ~, w0 b" e5 c; z: W2 R- v
4 P; [8 n/ |. W' d
| inline-table |
" `4 F8 g9 u: B2 B1 K! [此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。 |
8 h# u1 R) B: V6 S% I; [# n) G" }! r
| table-row-group |
" Q# S& L/ }& L8 x此元素会作为一个或多个行的分组来显示(类似 <tbody>)。 | 9 r% a3 m- a9 b3 I( s4 @
! C1 I+ Z4 K: ^0 K1 ?. z| table-header-group |
6 t( {6 w) k" {5 v此元素会作为一个或多个行的分组来显示(类似 <thead>)。 |
# d) w4 c3 r. b- g# v0 d
- ]8 H6 k9 i, A8 c! s5 r9 l| table-footer-group | 4 |0 L5 V! d, ]% M, z V) g8 z
此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。 |
& G0 g6 A+ h& x% J9 E( W5 [8 T* g! e2 t! B/ B
| table-row |
) i5 B( n" N' m8 U0 f. T4 G此元素会作为一个表格行显示(类似 <tr>)。 | 4 `7 D5 g3 o& K0 G
% @2 M5 l% F; S; u$ f4 k% y
| table-column-group | : l2 y( E5 ]; E) j! }. F$ W6 m
此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。 | 9 s1 R) m8 I% h7 i9 i$ z$ A b
' X( A" L+ O3 q+ X. A' ~5 ]1 ]| table-column | 7 i7 q v9 L/ I: j
此元素会作为一个单元格列显示(类似 <col>) |
% k3 V& w% L; ?8 c
4 r. w( }4 q' @( D8 d| table-cell | 5 p: ^0 l; u+ |
此元素会作为一个表格单元格显示(类似 <td> 和 <th>) | - u4 z" [& l, |. l( a' O& Q
# H+ F6 z% `& p: l J, E| table-caption |
& [/ y) a p5 A$ I5 [此元素会作为一个表格标题显示(类似 <caption>) |
$ D3 J; T8 E4 _# P) {- K4 n6 A. a. f, F
| inherit | 9 f$ q3 h4 k) V" S6 w# k6 D0 x
规定应该从父元素继承 display 属性的值。 | |