如何使h1标签不自动换行 [复制链接]

happyxp

  今天做网页的时候刚发现的问题，在一句话中加入h1标签或者h2、h3等，如下：

5 l+ ]) _: t2 y

  不<h1>自动</h1>换行

  显示的时候会是这个样子：

# l9 i8 ]: G! }9 A

不

自动

换行

会在h1标签处分为三行，如何让他不分为三行呢，只需在css中定义h1{display:inline;}然后就OK了。

 

以下是display的用法和定义：

 

! `1 c5 P5 ?5 R$ H3 L" Q4 J

定义和用法

display 属性规定元素应该生成的框的类型。

说明

这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。

注释：CSS2 中有值 compact 和 marker，不过由于缺乏广泛的支持，已经从 CSS2.1 中去除了。

; Q5 g( H6 {1 n& @1 ]9 E# Q; M3 n1 z" l* u! Y1 r6 ^: M0 f2 v8 C( v& F4 |4 z' l" ~" {; i: ]. ]& R7 f1 \# l( v* \7 C; D, i9 e2 u! I, ~* b' w* ]7 `5 n3 x- h# ~1 T+ a6 O z/ A" B8 Z3 Q* l/ g9 }& q( }8 t# M2 K3 r6 |' c/ W7 I/ o4 z7 E) M7 F! F* ?/ s! `. Q- J+ f8 A- T# z" G$ s

默认值：	inline
继承性：	no
版本：	CSS1
JavaScript 语法：	object.style.display="inline"

4 F ^ t, Y5 }5 K' V: ?( J

实例

使段落生出行内框：

p.inline
/ {* x5 Q: r9 e: D  {
0 f, R) S- u( E8 `# k8 m* E0 T$ l  display:inline;
- ]8 x0 ]+ [' z4 A  }

/ J. E8 J+ z* t5 y+ c

浏览器支持

* P. {# i; [' n( `: ]

所有主流浏览器都支持 display 属性。

. |( |! K$ J* |' X! j- H( @6 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"。

可能的值

, C$ z4 `" }' R. J1 k# \; h. m5 c2 j! X) I) B# Y9 Q) K# p" s( U1 y/ K( @. U& M1 z' u) {3 H6 a2 s# @. f, X0 L: M3 q2 Y7 W+ M0 G8 p3 k5 V7 p' A; }& J5 Y' Q& @- N1 [0 E7 J5 M/ t( A l$ A5 c, |+ Q7 a9 E( X5 f5 n) t x; q! ?. T1 P5 T1 }% Q2 ^. m* ?& W! M$ @) {3 c. H9 \- J4 {$ ^+ S! |/ c$ a3 ?$ T- H" L; {9 `9 W3 \- {' z" S2 T o6 K& X0 X, g# @/ \& N2 p6 i" K4 X k, u3 S0 s6 e! {+ k7 Q/ I# i7 |' @5 A+ U {5 v4 I7 p7 ?+ z* n" g0 @7 T/ G( {& B. n3 n5 Y" K4 S! e* A: l6 i' l5 s8 K& W, t" |4 Z/ r$ N- g4 b6 W. {) y0 c3 K4 Y9 j: B6 G. l' m X" C7 Z: M2 |3 }* z9 T5 u$ C6 y: c7 n, `. L: {5 P5 b0 a6 `# r8 ?! y- c& K1 v* C' s1 G" A$ L& a7 f4 F$ o3 u' ]/ s* @ j" D$ ~. x4 I2 s* k9 R; j6 p" P/ o; O. x% ]& W0 @# S5 \6 m, q9 C

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）
list-item	此元素会作为列表显示。
run-in	此元素会根据上下文作为块级元素或内联元素显示。
compact	CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker	CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table	此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table	此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group	此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group	此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group	此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row	此元素会作为一个表格行显示（类似 <tr>）。
table-column-group	此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column	此元素会作为一个单元格列显示（类似 <col>）
table-cell	此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption	此元素会作为一个表格标题显示（类似 <caption>）
inherit	规定应该从父元素继承 display 属性的值。