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

happyxp

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

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

, _' \. r& }6 R( d' F

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

% |3 H& S7 T# _3 w7 E! f/ T$ x

不

$ b/ q0 w" o# B& F6 o# @

自动

- m$ Z5 v4 {7 y9 \

换行

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

 

以下是display的用法和定义：

 

" }' P) z) S4 _6 ]5 f

定义和用法

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

2 v- U% Y z! M0 G

说明

. p% Y, r# |. |6 z' M) F

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

, F! N* o# @& g, A3 ~2 n& {: B6 |' L

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

( F( W4 v. I& h' `# M& c& ~3 I- a/ }4 o4 [3 d% `+ T; d( y7 \: U( R+ p) u& I; N2 r% o' q) U. F/ k) m! i U$ t3 z2 N3 C- p& `9 |* R+ D( e3 {- B5 v' L1 g% X9 M: w3 X3 P- S6 R* _

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

实例

- x' W* M5 V& T/ O! u6 `

使段落生出行内框：

p.inline
  {
  display:inline;
8 ]( v4 j! P- s6 ]* K2 e8 g0 G  }

, N) @9 Z* I" K1 O( p' h

! i8 j T: _" g8 a. F9 M+ u

浏览器支持

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

/ q ?8 p+ V$ m: h9 a1 b6 u

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

可能的值

, z/ F: ?; P# n% [ i- y* o" Z |5 N4 h) h, Y) q& D4 q% N. M. T$ i# L, `$ l& F9 d$ N9 B$ S2 W7 I0 G3 U8 ?- k0 U4 {3 A1 L& A7 ^2 ~& c% v9 V8 V' T) Q; x, ~" U# k% V- l2 c- E/ b' B6 V7 A: A6 I2 Q: w) Q% q0 W- {% ^# |) ?& K% H! H) D/ ~5 Z# l) z* a8 w# W7 P. E, j; z9 [) |# @0 Y8 l) }* }( ^+ }9 e/ h$ D! ]9 a6 k( t0 e" N( D$ V' i5 O& i3 A, m2 n0 r0 d/ N" m# }5 V, S, _4 o* h: Q2 z" a( v7 r. F5 P+ J- l/ K8 o( Y4 \# i9 f% _7 H8 f6 T- d E4 f9 n* h9 ~* E. M7 v4 S# y, u& i9 [+ p$ T" o5 _9 r- X1 p+ L: ~; W9 P/ V' m( h; K( B0 g" z+ p" X9 s& e* N/ u& G* b6 {4 V d! l: ^$ G2 `# H" ?; U1 A( U& R9 d+ Y7 {4 w3 e$ n" Q8 n* |: k5 n5 b5 M' n5 M$ U% }1 ?, r# \5 r+ E7 f# B1 F9 a' D

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