今天做网页的时候刚发现的问题,在一句话中加入h1标签或者h2、h3等,如下: , z$ F( ?( U i& Q' e- l
不<h1>自动</h1>换行 4 b Y. p$ M) k6 r% c' I; r( p1 a9 B/ ^
显示的时候会是这个样子:
2 K5 Q1 A q8 X: k不 I3 P2 [, Y! o/ o3 ^0 v; @3 \
自动
' {# x: n) f i2 D, W换行 ' Z+ K) I* `1 ?5 M6 n" g
会在h1标签处分为三行,如何让他不分为三行呢,只需在css中定义h1{display:inline;}然后就OK了。 . Z: K4 k) E. N
& q- n% D6 T) K6 K% y0 q
以下是display的用法和定义:
% J! m4 n9 r" p4 w9 `7 [" J , Y& @7 Q! I% K- k9 X
6 i2 H7 z& G5 p P6 A9 E
定义和用法
$ ]5 v3 K) y5 t& r* q+ J2 Jdisplay 属性规定元素应该生成的框的类型。
* q' }# h% G' E2 g T! }5 D说明
! a; Y/ t* L5 u这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML 没有内置的这种层次结构,所有 display 是绝对必要的。
. j2 i+ @+ \5 l3 R注释:CSS2 中有值 compact 和 marker,不过由于缺乏广泛的支持,已经从 CSS2.1 中去除了。
9 F# S |9 \4 H( B/ l. I2 z# d# X( s( q1 l5 d# f
; Z, H' k) g) W$ ?: M
+ F! ~- u8 t' ?+ \: V默认值: | # T1 N+ q5 { V5 h( ^/ ^5 O
inline |
4 r& t2 n2 `5 O
# [$ Q+ v+ k/ H8 [继承性: | 0 \! s! d# ?( J" e& n
no |
, Q# g5 @9 w8 H* ~2 x& |7 }
0 x# e! \- ? u+ \, ?版本: |
8 N4 y. @8 G; g W |5 U- lCSS1 | : E/ ^9 g/ X j- @
- j. i" [* ~ g1 M- J( F# e
JavaScript 语法: | + F. Y8 M. r9 a+ Q* G% S
object.style.display="inline" |
0 Z" ^ |$ f8 H. x( ]2 w2 [, n4 e G) p
实例
3 D' ?3 m2 Y1 @+ ^使段落生出行内框: p.inline
1 w( X$ e5 z' t5 f) I {& T% ^- ^7 H2 o2 |2 s2 V2 G* r
display:inline; # `9 ^( W) d# U7 `8 F* I
}
7 Z* L# J! F# O: T
) C/ i" V7 v. ?: Y" j浏览器支持6 ^- Z. {0 k' t$ _7 @. e
所有主流浏览器都支持 display 属性。
% j5 s+ I2 }7 @# c' A注释:如果规定了 !DOCTYPE,则 Internet Explorer 8 (以及更高版本)支持属性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及 "inherit"。
+ Q# u( u7 {- z7 q7 Z+ S* B1 T( g
; b# ^. o _6 A可能的值+ w) {7 A X6 t/ ^5 K! B2 `9 C
X0 j c6 [) ^! M$ [5 `
j, K+ ^& ]: T: M/ c' o
0 m# `7 s$ j2 w值 |
8 T5 Q2 T: J. q/ X+ S8 @2 j8 Z描述 | , {' r9 I m- i1 S3 `9 `0 s3 g( e" W
7 m# S. s6 ^% D" W: Pnone |
+ d9 |7 X* k- ~0 ~* |# w& y此元素不会被显示。 |
* k3 B% M2 Z( n9 ^/ x5 l
) h6 N* i" m+ A. s6 v7 Hblock |
( W6 \2 L6 F3 {! }4 g此元素将显示为块级元素,此元素前后会带有换行符。 |
8 T T1 j4 I6 J- ]
7 w, H3 |0 Q* q; b# W f4 h7 |inline | : ?6 F# o& x* @" F+ f+ u; h
默认。此元素会被显示为内联元素,元素前后没有换行符。 | 4 a' ^; [2 o. b
: S) z, P5 e; `; W W: K
inline-block |
4 z0 V5 }- n' \行内块元素。(CSS2.1 新增的值) |
8 m! ?" Q/ P" C( M9 h; L/ {( l
& g( R4 g1 m5 ?& j* E6 E' O5 Nlist-item |
; h4 C l" Y* l此元素会作为列表显示。 |
2 ]% x& b; {! ^3 j8 o( c
$ S9 p! U4 i' Z7 I/ vrun-in |
+ x& X8 t' K* V: z此元素会根据上下文作为块级元素或内联元素显示。 |
y2 ], n# M% j! A' r! Q0 G, E& i+ K1 p- } k- N2 P7 P
compact |
7 k4 {, T0 U) A1 q& GCSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 |
' {4 j) e% I( ?0 X6 I# N ]* n" I1 y+ _2 `" ~0 @2 g
marker | 2 W: W) k. b% t, Q' m; }9 P, k* l
CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 | 6 a2 |8 Y3 e+ K0 e4 w' R
. e& a9 J8 M4 v* u- d% x5 d
table |
+ e+ e4 s! a% p/ a- R此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。 | 2 ]9 B4 \6 ]* \0 ?& `; @
. D. F. @7 \. F" Z: f
inline-table |
2 a. Q% m# K3 E. N7 m) c( T: z2 b8 V此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。 | 2 q/ T; _( G7 r: m% I& k i# n
! l N" N. @6 ] ^& n
table-row-group |
6 I& _2 ]0 q; U( a- z此元素会作为一个或多个行的分组来显示(类似 <tbody>)。 | . u$ K. F5 N- c0 q% ^" r
K- m$ n0 F% |2 x
table-header-group | ; ?1 ?% y; [- @' ]" ^: J5 l
此元素会作为一个或多个行的分组来显示(类似 <thead>)。 |
! N: g" o8 ?" c# v% b. q$ v0 x8 S$ |/ Q. J
table-footer-group | ! E" o& F% i! L! z6 A( V: l0 {" o
此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。 | 2 z$ g- L; c2 S# ~ H5 b* }
' l* m% d" o. S1 i. W- K
table-row |
" }, W1 f- \. U3 n' M" l% C0 w5 ?此元素会作为一个表格行显示(类似 <tr>)。 | ^7 v: ^( h4 x I
, q, t! F4 G1 { O1 r$ [/ ytable-column-group |
- w9 X p& H8 b# _2 M7 U此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。 |
- x1 ]3 O1 V, W J# C, }) X( S3 r; p
table-column |
# U. l3 C8 i H! l此元素会作为一个单元格列显示(类似 <col>) |
: q$ ?3 H) p& m0 \) Q8 n$ }2 Z
# r+ y; b& S+ J4 ytable-cell |
. G$ H6 y/ @: Y- o1 V E# I此元素会作为一个表格单元格显示(类似 <td> 和 <th>) |
' r* w8 P8 g5 v% d( a$ N7 ], H. A/ m; O3 y
table-caption | . r3 c. ~. f6 i: o* I9 W2 X
此元素会作为一个表格标题显示(类似 <caption>) | ; P/ e& [, c' E. Y2 M
' x/ ]+ h7 e; |' Z; F- I4 u; n% L
inherit | 3 V% H0 E( e8 p- b4 X0 `) F5 \' U6 _
规定应该从父元素继承 display 属性的值。 | |