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

happyxp

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

6 Q& b# b) W" ], D; m/ n# |, E

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

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

0 O+ M) `, Y/ |# P V

不

自动

. E. q' e" j, K4 v; ^- E$ V+ {4 T/ o

换行

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

 

以下是display的用法和定义：

1 ]$ g, [% O* A$ J; ]5 ^+ _1 r8 b

 

" O- r0 Z9 M& o& f4 B$ i5 R& U

# Y- t1 `" l" v# y

定义和用法

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

说明

& }; S8 _5 |% b

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

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

8 L3 j) Y3 c7 A: I; d9 R7 C# G9 P& F$ _$ a2 D- o, u0 W, w: D2 t. u* L% o) [4 s0 s# W8 Q3 C& ?& z" v' b8 ?0 C+ ~' _7 K7 `9 y/ i' o/ [( Y, f0 A X( E! s; @& s" n, m8 a8 C

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

. O+ _% J; G+ `/ ~4 _

实例

: T8 H# @% ^7 j% C8 F I

使段落生出行内框：

p.inline
  {
% {1 A, V4 }7 `5 D2 z2 i  display:inline;
  }

; H9 \( o; T+ Q. R* Q

浏览器支持

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

, O7 O) E) Z! {

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

/ ? g: M/ U, n5 W2 E

可能的值

5 M- ^+ ^ H% l9 s+ w# \8 G4 m$ u; ?5 b4 m/ b% w# H# a8 t+ f& P: a& M1 C4 }4 v8 s# U, \( C, G0 s t# u9 h8 p8 w# W) N' ~7 w, y; [% L7 v0 J+ f# S5 D7 J' \* z4 i& A) B5 c) x3 ?6 z0 {: c# o1 |. z; r8 ^3 Z. G' T, T1 p" _ J0 A; n1 f% z9 m& D8 e& `- M' u) [3 z9 o+ ?- n4 ~/ Q' k* @% q, x; z1 ?* J3 W4 s6 V7 Z& J! l, r# E+ G1 Q* {2 \4 R; `6 T! J( s+ G" A) @9 m5 e- K2 {8 `7 A# q1 N, @# [! h. X7 X, A1 C' r) \! }: E) T4 ]+ B' C$ S$ W8 t6 X( x6 R4 q- z" @. J% G, e9 x6 [: H% j% i `+ h3 r* e+ V0 `; Q: `4 Z& E. T7 |3 P4 \) n0 X( W/ N" X E9 A+ a m+ J# I' g* s7 `7 q' J6 P' J9 _" K; Z; Q& _+ q$ \5 j, |+ k% ^* u, T, J) l! s2 ]) r: G& x6 [ g* [/ V/ f8 h. P5 B F1 U; z7 k2 b: s9 I1 Z3 _. n- `5 i: P4 c! T. W( o* R7 {& h" o' \/ [+ k9 Y; _+ G, N* W

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