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

happyxp

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

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

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

1 b8 q( n! G4 @* M

不

/ W2 z- V; r' L+ k* C

自动

( A& p2 W7 Z7 E* g* r/ g

换行

- v; u4 N% X d m1 D, D

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

 

以下是display的用法和定义：

 

) N; v; |0 G# j% H4 }

定义和用法

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

3 y; b9 b# E7 R$ m7 m+ e7 H

说明

) \( B3 T, u7 w" \ J" i

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

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

6 H% O5 s1 [# F8 s' R( }' i, c( a( ?# h& T) o- r* v: V4 b5 W" n5 d/ M( Z

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

7 i6 [% _: ?8 J+ c4 Z

- T2 E1 Y5 I. p' G* ]8 ?$ W! {

实例

: Q: @, A- @1 r5 T

使段落生出行内框：

p.inline
  {
  display:inline;
: x& b% Q% q& ?% r) S, d( G  }

2 j( C/ d$ T. i8 J' F" L% i

浏览器支持

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

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

0 A* X& h) I) E# `" t ~- K

可能的值

4 z7 ^% @; T! D A( i6 d _. ^, M. A+ S; G, A6 ^4 ~& \: Z/ q- H" z6 K7 a, V( O: c! Q6 \( q; ]2 T( J e/ H5 x7 Q% l3 s/ R6 v' d! a% O) a9 Z. I. V; a3 c. |- R u' F- f3 J; H4 X& u! T' r1 H [5 y- T3 [+ Z; X" d" ^0 Z0 h: P# p' I* J* y) L- M$ L: y" p2 c2 h4 \0 J) @7 R9 Z) l8 q, g# j; H1 P7 i' [+ ^0 P( U' m- E9 V- b2 m# [- Z$ W; l. Y3 Q9 u! ~2 Q& j9 i7 X3 |: {# D. s- Y& J7 _' z0 O# c% a6 ?" v; U7 r9 O' p0 F1 m, Y8 ^2 e- R6 n& Z5 F- V+ M7 O B$ a' H- v* r; U3 g; L u( V# z6 h% ~8 @$ v: Z- ~" R6 } J; P7 [% W5 n( q2 Z, t" r& S: _* n. t$ V2 d: X- b2 X/ R& x ?% n9 ]" `) t# m. G/ I3 \5 A7 }+ I/ X9 M3 ~+ z% q% i9 ~* Z; @, x9 Y0 W M7 }8 I4 C, ?0 w. h% Y E( O% C$ `- f2 ?: M6 C! R* F `/ d/ H1 j$ `# Y7 O& D+ o1 K' d' o H; s' e1 W y d/ f1 v0 o+ e2 i& t' K; u$ I+ K) n4 z. l! }8 m: v" h$ S! Y$ Q( l

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