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

happyxp

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

/ P9 X3 o h2 q6 R! _! M9 ?; Q

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

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

# ~; E: q( j+ B! p

不

/ c/ ]5 H* s' q! M G

自动

换行

& v$ R; Q% C1 h# p2 O

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

 

以下是display的用法和定义：

 

) ^; A% O, a4 J8 K

& h# Y# x t2 N) ^' R0 Y, R

定义和用法

; d6 a, O' H6 c' u

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

说明

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

, r3 @6 `8 d3 e4 d) _% _

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

4 X" @* F" q3 r; }, K y# Q& \1 `, C r. l& d- d8 d: Z3 E7 g- f6 g$ q5 G* U W0 ^9 U. u3 }' C/ Y8 p0 K$ U! A5 `# R6 I5 V! x& G' H6 c+ ?4 ^8 |" @% N1 }1 @1 e$ r1 i7 l* p) g: T6 W# I; d: Z/ }2 {5 j/ D* I0 e1 N' d- }" j6 Q g3 R( O% b' ?9 i( }% F0 ]1 q3 G

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

$ z! h& c) M- n& v; z G

+ Z5 r9 _/ H5 M3 V- M

实例

; S+ F; |9 ]6 L. c) \! L- @

使段落生出行内框：

p.inline
8 ^0 _% i) B0 l0 Z7 [! G' U% S  {
  display:inline;
8 `5 s  B1 _* x# _( Z  }

S+ i2 z' b/ H* H

浏览器支持

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

9 P! j9 Z1 ~2 }3 E& \% u' W/ @

注释：如果规定了 !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 z2 d X, Y1 f. b3 @' h: A

可能的值

$ u! O2 p5 u) C* Y! X9 K. X Y1 w4 ] F! f9 e) C+ G7 X" x/ U% F3 @% C+ w% l, D! W. Z( g% B' Y3 I- b5 {6 |1 p2 @ E% c' `0 P* n0 r8 F0 l8 X" g2 U: o0 ~8 x# ^6 U* C* w& J. q- t! k) m4 J$ {/ K6 x6 ~9 X" g$ S6 V* v) b5 }' f# ]6 w. V) c. ]+ p( D3 h- [4 \0 f! I$ H# ]/ [) Y3 b0 S9 H4 J! D: p2 M3 p B0 ]/ i" G3 ]- X+ Z8 A% g' q# r" D* N1 W: `3 m0 I) a. j& Y$ e/ z Q6 F; g+ O5 M( Y$ A1 K- {# h) e. e. i& R8 ~- a- f$ y$ q, P) E; W: R! \% v7 t, Z# @( y' E2 e1 | r+ z% x: A+ @& {) o7 l4 e9 g1 o% X. X. }5 J! F1 m0 ?1 h( T4 A2 M" u5 [" A" d) ~4 a O) H9 X0 B" `0 ?, g# {/ w/ v$ I3 ?3 x5 l9 w( _7 q! T7 }- }, ?. m" G* P3 _+ B3 ?* M, v; m9 a4 v: `: h: Z" B" ?3 P u2 y# O( [4 y1 m7 N9 W% o) r Z2 R; s! Y' T/ T; I2 j8 N: u" q/ T

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