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

happyxp

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

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

5 Q+ C8 E/ Q1 n' z; |" b9 N$ f

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

5 G: o/ _3 f. X' v

不

1 c! [/ J/ N; j

自动

Q# l8 H# Z% O; o0 O7 F" m

换行

# G3 Z& d; I; k& X" I7 ]

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

 

6 H1 g' ^/ s5 [1 f8 ?

以下是display的用法和定义：

$ [4 q& c& \. R. D4 ^0 ~- X

 

, q& U7 b2 f1 R( f; K4 i8 Y

定义和用法

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

说明

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

3 Q/ W2 }" @+ c* E6 y# G: X. ` C

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

4 s* O R1 |) Z. V t# ]6 x( { S6 F3 x1 S) _% e, A6 y2 R& v1 X1 N" o' C$ n" q; V4 O; W2 L% w& v3 l! m5 n: ^* K% a$ V" A U( Y) N$ F+ F2 R8 P5 N. b, `* X& ~6 s& _- L* ]7 A0 {: l' _; |" w/ k' D

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

^" N# q( s" U4 [% a8 L

实例

使段落生出行内框：

p.inline
( k, I4 y  N# F( ~' J$ G; f4 D  {
) _1 @( Z6 V5 Z8 O: G4 p  display:inline;
7 ~& Z* Z/ m# A- L  }

浏览器支持

- P- C& S1 b2 i! z, o9 A

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

/ ~+ l) i% S+ t+ Y4 }5 p

注释：如果规定了 !DOCTYPE，则 Internet Explorer 8 （以及更高版本）支持属性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及 "inherit"。

/ T* x% |! Y% T7 h* \

可能的值

5 l5 c; ~; m# |6 U4 w" ?0 W- L- Z0 J2 M) ~4 @ ~2 C# ~. X: i7 V' W& r0 |0 Y/ [. N3 ?& T. q) \% v5 N b6 y3 Q' a' N9 j6 a, r1 B9 q8 Y% P( r: e& T/ s, N n8 j5 X6 ~( j% F3 t6 F4 k: ^! v& _ I% M( g1 p' @' d1 K Q# K1 X: \* U9 V1 X9 x9 W9 v3 o! h* ~" [2 S. v! g9 P6 r( i2 E& g& ]8 o" ]% @8 j6 R# Z) S3 ] G1 _" H7 P/ e4 W- w4 ^, x% y9 Z2 L8 y& _3 R: T5 A1 j% \2 I! P t% D. z; @" {, n; w* h, z# f, M4 B4 P8 G9 o u U1 I5 k( E" X1 Q( S# p: C! Z! E$ P3 n* b5 Z: {2 K" r' s( I8 {. C7 `# P* x/ E+ t X: L u/ T0 _/ I5 s( [2 `. t: A1 F% C( ~" W2 q H6 E4 r8 ] [3 H* k( v7 ~* M) [3 k6 b. E8 ] K; x. _ n3 I! E) ~2 w9 v4 p& W! g8 t, j! m, j t o. [) Y7 v0 q1 m, q" J* C) a# w7 ~) K0 h( ?, Z" n1 y( b

值	描述
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 属性的值。