今天做网页的时候刚发现的问题,在一句话中加入h1标签或者h2、h3等,如下: 1 T9 z7 F& o1 I, E/ g
不<h1>自动</h1>换行 7 j6 j% M' o2 }
显示的时候会是这个样子: # R& n7 \/ u) U$ \! R$ s! `
不
( _2 @( {' ^8 F2 d# I6 C自动 " w$ Q& ^2 d5 _' N" N @; r- b
换行 6 V n8 s( L0 `# P! E1 F
会在h1标签处分为三行,如何让他不分为三行呢,只需在css中定义h1{display:inline;}然后就OK了。 # C9 s) v& O, K9 j6 }
1 d8 M p. R3 ~* S
以下是display的用法和定义:
+ P4 X; F! H" _, ?' J) @
0 n$ ^7 R; |1 d/ y7 z# U3 d
2 ^8 a% I, g+ \定义和用法
4 V( y f- F" H; edisplay 属性规定元素应该生成的框的类型。 7 X# j9 a J- q0 a9 c" G' L$ P+ \
说明
' r; S8 \# ?( D/ _+ o- f这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML 没有内置的这种层次结构,所有 display 是绝对必要的。
/ J4 c; q9 r5 U; j" C注释:CSS2 中有值 compact 和 marker,不过由于缺乏广泛的支持,已经从 CSS2.1 中去除了。 ; W- U! j( G" T! F
8 p- \+ K& k; L5 p# b$ ?: A" T
: h, x4 z) g+ i4 P9 ^
0 O- C9 T K: K/ y9 `% f
默认值: |
( z W2 F1 G" f' I& r/ |" ?inline |
& }, P& G5 m( g2 l! u; Y* @ O( B9 D+ r/ N, a* \ w
继承性: |
2 x9 s3 m; C0 `- ?, xno | 8 h0 S: ^# K! a
q* b, j- m' V: C' ?) u; b
版本: | 1 c( x! M; @0 U6 s- Z3 \* U
CSS1 |
/ P* E; ^; w3 t9 F! a5 h2 j
6 X; K9 ?$ }# \% @! q j3 V* kJavaScript 语法: | 5 S5 Q, e$ v9 Z( I, q) z; e$ J4 [, ]
object.style.display="inline" | 7 W7 Q& a9 o3 W1 T; ?
8 c) P* o) W: S/ h4 `
实例9 R0 d; Z7 ]8 [
使段落生出行内框: p.inline
7 @5 l: h f+ Z/ y% F- _' o {
- Y2 U" s2 h' V N0 W display:inline; ) V' \1 f$ I4 r1 O
}
1 M9 s8 G$ F# ?+ E) y3 s7 k$ o% c- Y9 t/ U8 w& l4 Z' ^0 r
浏览器支持
8 K/ X/ G2 \; U- z X所有主流浏览器都支持 display 属性。 ' \# C2 B! L0 ?( 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"。
/ e8 X& k$ F. Z
: t, U' n. x7 I% u% W# c7 \可能的值
7 J$ o4 V6 L6 ?- h$ D X4 J& X- A: w/ J
9 i9 D* x! P8 T
' y& }( r) T4 A/ |值 | & z% [- }# }( G: e% r; b4 c, j
描述 | : f b! O4 t1 C" q3 ?
& n# {7 v8 B# Mnone | , D5 k( H. L/ y' s5 f# n, a4 _. f& E
此元素不会被显示。 | % t Z, |: H! i) x# h! K7 K
5 B8 g1 c7 _6 sblock |
! m) T3 N8 i6 Z' `9 x3 R此元素将显示为块级元素,此元素前后会带有换行符。 |
r' Z, O; U* b+ o& R0 F/ `: G2 h: [% m# I) F1 L r+ y
inline | 3 H6 x" O6 X( o$ `2 c1 I& P6 o/ K: C
默认。此元素会被显示为内联元素,元素前后没有换行符。 | 1 u7 H! i; F% G! ^
: [; e: W9 U# v k& ~9 H! Q6 Hinline-block |
# T7 l6 M. p: t; O$ y行内块元素。(CSS2.1 新增的值) |
+ `* n3 n/ \% J$ T/ c! V
2 o/ q) C c, Q* k, {* olist-item |
- H- @/ {" Q0 x1 O; o+ E" i此元素会作为列表显示。 |
7 X, o5 u. q2 {2 C! d& `& X0 b& _
run-in |
& Q6 k; V8 q: H, _% x此元素会根据上下文作为块级元素或内联元素显示。 | * w- R$ R: v4 p, ]# j, G
% q% j. R+ u( C0 Z
compact |
1 a6 S- ~6 }8 V, q3 RCSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 |
* C3 g, X9 ^# S. y' n0 y. m; M- E, a. p' S4 z
marker |
0 E8 D$ k: _% HCSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 |
: `2 J3 o9 \1 w0 h; I: a4 L! b" f/ V1 V* [7 p7 k* O) M
table | ) w7 h' K0 o- {+ l
此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。 |
7 f( f$ M. ^4 ~
- r1 X* q) ]* q) {; vinline-table | ( @$ ~) P9 Y) k" j, E2 l
此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。 | 2 q: E3 c/ E, V" v
# U Q4 J: a$ v6 r
table-row-group | 5 D# I" j3 O" ?1 t* e7 p
此元素会作为一个或多个行的分组来显示(类似 <tbody>)。 |
) _$ y Q9 b- {4 z5 h& ~5 R, ]$ ?& T4 ]( A( U7 e; M- @
table-header-group | , {: f4 n& @9 t G0 e& b
此元素会作为一个或多个行的分组来显示(类似 <thead>)。 |
. b q+ ~, W G! f) \. Y. |1 ~+ |9 ^7 O
table-footer-group | ' |+ S! A, H3 D" e2 w7 k4 ?
此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。 | ( O- I1 B$ N8 I4 P4 w
. C/ _9 L U9 A* e$ X* P' \table-row |
' E# ? y$ r4 \9 }此元素会作为一个表格行显示(类似 <tr>)。 |
4 T& f6 i: A2 @6 y5 h* m/ T0 @, U- u* w. }$ D) X7 Y0 A: {
table-column-group | * c7 {6 W9 L8 Y. P4 @$ D# R b$ m
此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。 |
) [. i' }1 O1 v. p( S* ?7 {$ i, v; u% e0 n
table-column | % E- Z7 w6 s3 z5 Y" p0 {
此元素会作为一个单元格列显示(类似 <col>) |
( N7 O* ~ M# t( p# V2 ~, M& X0 E# W- R
table-cell | + @3 q. {! ]9 |+ h. [3 z5 P
此元素会作为一个表格单元格显示(类似 <td> 和 <th>) | & P: G6 p% F1 G/ |
" x, S' U3 q" ` F
table-caption |
6 Q# [+ u) R; C6 k. c4 o- A6 f此元素会作为一个表格标题显示(类似 <caption>) |
- M* z4 S. c& C5 X# B- i9 Y# ?- k6 P6 a9 U2 h8 c8 ~1 n6 b
inherit |
) L( t0 I! F% R5 s规定应该从父元素继承 display 属性的值。 | |