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

happyxp

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

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

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

不

自动

换行

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

 

以下是display的用法和定义：

 

定义和用法

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

* | z1 |6 C# ]# G6 n+ e! c; ]0 [9 s

说明

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

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

. t5 D$ D8 L1 _6 V, Z! k G! j/ F, C1 q E6 u4 Y- V3 }% Y" i$ @; X2 k4 q2 b+ M6 [+ B( J1 K: A0 b2 j! N( [' m6 |/ r* H6 P- m8 h" z( r3 ^# t' m6 {5 }! e9 P, E* b) k1 F6 _9 ~( Q+ [- a( o; N# g* [9 ~( E. t) t* {7 \% l7 z/ I

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

7 x! I" C4 @7 r* l

! x4 n$ k4 a5 f6 Y) E' m: N# K

实例

使段落生出行内框：

p.inline
  {
  display:inline;
  }

' r) Y" B! a" P$ V; C! G7 K* c

R \+ ^9 r8 o# g& C* F+ ?# e

浏览器支持

& W+ m. i- }4 n- b' N

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

4 \7 I* b* N3 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"。

+ i! p o7 C9 X

( B0 S) }. A& Q1 C G

可能的值

h( I$ E$ _6 {' q, Z7 F0 o* M' s: L8 m6 ?$ K" `1 f. s& `) L7 I, f- i/ {( S1 |0 E }! ]! J& e* v% L0 v6 U3 |4 c. F4 b* G4 Q7 F& o6 o$ u4 F3 x$ F$ O, X/ C* i) P1 F: R/ C: g% G% C! g9 ^- r4 L; d7 B2 ^/ W# _+ K5 W6 Z) q) g: T* f! u; _" O- n: D R& C! d. ?4 ?/ v# X7 _/ |2 G- Q' a: y4 u* k, Q! m5 r$ O0 p2 d+ x. g2 q1 I; R" l7 i' L0 J9 @0 G1 a/ q, f% ~( Y1 K5 P1 t/ R7 f1 E/ t; t7 s4 M% u& \, H% N y& Q% S- ~7 n' b! D1 s& Y, m5 x) r( q& h, L* T+ T0 k, G0 x, ]. p: t0 }: D* V- o- y- x: ]8 p0 n# y. F( K/ x) R" `: i( q( W6 L G1 |" y4 _( F1 X* c1 U% l6 |. p$ F+ [0 H8 n1 d& G; ~) H- s, K- Z" b+ p* i2 _6 M) k* @: r3 C, m" S$ T. i M% g1 I/ G. D! n2 ]- _ l0 W0 Q( Z v4 j! ?* H0 o% A8 U" h4 U4 O9 g- a9 h1 P/ U7 b, z! l' h0 O# B! \' S0 w) g: `! a6 P e, z1 I2 R: }* A% X9 N2 _" _* n4 Q' |* L6 j# P1 v9 k9 j F; 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 属性的值。