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

happyxp

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

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

3 A- g9 @8 n/ v) E* \2 W! Y

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

不

自动

换行

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

 

以下是display的用法和定义：

: {. L: n* ~" \' f) {. R6 B1 ~1 B

 

: I4 y8 y7 j8 D' P D) ~

定义和用法

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

说明

* d+ |! p% k0 F5 X. U$ Q

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

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

$ \. G& N0 D- h0 g# }# j' o0 m" x; }. S& R: T/ Q3 g# x: ?6 B7 ?' H; h# J2 p9 v$ _: k4 s5 n) H) Z4 o' M% C \* r% n; _5 k8 j% Q' [8 Q; c7 }' e$ [- N# W$ j7 a& \) g$ H7 { u' M8 h F' t( g: p. [, @6 ?8 U

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

_: E$ n/ ?7 v- f7 _

实例

使段落生出行内框：

p.inline
  {
  display:inline;
  }

A8 |/ r8 }+ }* e9 f9 ]8 a

浏览器支持

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

) }) {( V9 f; |( E/ J

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

1 ^ Q4 Q: m1 }' S g5 u! a& V

' D& N4 C6 ~) g" {

可能的值

5 Y8 L/ ~/ R9 Q- A" f+ u* j' ~3 ~. x% O B f7 R' m- F* c# U. i" o6 b L9 ?4 h% P" e( M, m* M5 L/ r {, z( {4 M7 W6 Q$ C& S4 U, `2 ~8 G9 L6 n% g! [9 z3 a" [ M, o6 c# R& n1 J& R$ {3 R/ {8 ?6 T! n" v! ]! t1 m* D: {) G& j3 j" r- e- R/ y2 x( d9 Q+ e8 Q: c$ K) C0 ?6 v$ C0 b+ I! H$ F% y# ^7 I. v7 {! L8 Q! k D& ^& U! S U: O! H0 O% \. i) @9 a6 t4 v. l% A& t. X" S3 A* _7 I9 u. ~; I+ N0 S4 |1 k( V; Y; o) k7 Y* D. b7 {( j; h1 I0 `% ^; e. e9 q4 K* G- k) {* `* k8 z/ {5 x" b; R. U5 L3 [" f2 A/ C6 M% W0 V1 p3 [* D( e" s U2 M2 j1 O1 F* M$ O* ~; u( L3 A8 |% y3 A3 E9 q! A

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