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

happyxp

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

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

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

5 t# Y2 ?7 C; A

不

0 a- S$ J, }" E* V

自动

+ {+ I: z6 ~# x

换行

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

 

以下是display的用法和定义：

 

* A0 P) f* N& l5 K w7 T- l

定义和用法

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

说明

. v& S" Y; s8 j

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

6 }+ F4 V! q$ n# Y5 {, z2 ]% k

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

" N: s- K! v( a2 f! S$ P2 S. I4 r9 P- `' j, Y- x0 k9 K4 Y( k# K- p) @& M) B1 m

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

实例

3 l" A% \( K6 t4 ^9 S% D

使段落生出行内框：

p.inline
& g; k& f& T& t2 G# P. j" c" O! a  {
  display:inline;
3 E8 m9 D- n/ n) P: i9 g  }

6 T6 B1 e! a7 O& w' P7 g {

浏览器支持

所有主流浏览器都支持 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"。

可能的值

$ O6 O7 i( ^! O; \ i" P" g5 H' C+ P9 q+ F1 Q* S8 \! ~/ U5 ]0 b5 ^. U9 {( r1 H; S' ?1 ?: U1 b* ^3 H" b8 m- u; _, b( J# |" f1 w) w) w) P' u" T; {- h( J* |7 N1 \) G { k* M9 w- o1 U+ U1 o2 q- ^2 q6 c m6 J5 s( o) @2 b# d& F5 ?; t5 U5 Z2 h0 E; X, \* e: Q2 T2 M1 t, q# l9 l# x* M7 J- `! j3 [/ P+ b' F: H* t" _/ e- V/ W, U0 z/ X- ]9 ~/ q3 }" Y6 y9 K" c( t8 {# L$ y; H0 ?7 v6 }8 | Y. U V9 ^8 i L( }7 S- ? A1 O f! g% |5 x1 e3 B4 r3 S$ c1 I! K; d4 S: V2 M) i5 B% d- [6 T: ^; G# L$ o |: T3 K9 e/ _- I5 f4 [' Q; W/ p& R& Z4 ]8 o$ ]2 Z7 t2 M8 R. y7 p9 H1 c4 U3 J5 ]- B' M# F9 _1 ~* S* z$ v: n5 h1 T% J6 w9 K0 Z' U1 ?: O/ F" q' T2 t9 M! j! r. q' j9 Y Q [1 a6 |. V9 O! ~( G8 I( B9 h$ I2 t2 m/ n( C' p5 H9 q* h. s" K$ H, m4 F* S! ~5 r- d. Z, n& l2 }7 J; P

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