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

happyxp

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

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

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

不

* s" h3 s7 z- M& I7 j0 T& B

自动

换行

; B6 F6 i* @3 I8 G) a S

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

 

以下是display的用法和定义：

' M! \3 R" @, g* t) N

 

定义和用法

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

, f4 b6 E) E( n+ B/ E

说明

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

9 A% l' x" v- ?6 Q1 b1 L% l! x8 l% V8 X

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

7 {- S, i7 U& _' }/ W; x! W# S- r; r7 ~ V. K" Y$ r/ v( R) l( `- w+ U& e; Z n5 b: C" t4 [( C" S: A% G) h# P2 S# V N! Q4 Z

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

) O4 ?+ o4 R0 K- l8 f0 [4 @, }

实例

" n- z+ A& j3 F" Q# N- ]: `

使段落生出行内框：

p.inline
9 J% }. c# B1 |" d$ W5 }& V  {
9 m( S% H+ I  ^, b* ^  display:inline;
  }

+ U' {9 E7 h5 o& G1 C3 x/ i/ _

浏览器支持

# A$ p) C! { U( p. l4 T

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

% n! n+ Q* M8 `+ T- x8 U Y

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

% l& v9 O; g- m0 K2 |& }

& S3 N8 j1 B8 q4 k+ C8 Z

可能的值

X/ p. c, {: Y* C8 D4 }9 I( J2 P7 i# x. E) ?. G* Q' L0 l7 f0 Q* p \* |1 \5 o8 w& S+ d0 F# _- X" w5 q$ T5 f; A5 m! w$ N+ }% a$ o; |3 {7 P9 Q5 Z" Q3 p& `; o; _ m, t1 [ Z! \9 ?% ~! \" u# x* K6 P) b$ Z8 y2 X* M8 b1 v3 _! i' q! Y& f: i; y2 \, ]6 O& m! L! b8 g/ c+ v' E8 B8 w( c+ M4 f3 m1 @7 ]! T# r7 U+ h) H4 B0 Z* P% C7 V5 B) j# K0 `( W# u; k# R; W8 v: B9 z) e+ M+ f& A4 h1 \1 e9 N" _' C9 `; \4 x! P. ]$ K" ~ O4 [3 ]1 r4 J0 A9 u: E1 j& l# b j+ k7 l! f+ { p# `9 s/ {. g. T) J$ w4 V+ Y8 E: o3 [* P c) p& C9 }1 V9 n' K) a! X7 E) g- n9 E: U- _5 X7 O' z5 K- D" Q N/ N6 e a7 H4 o& v# S- h; \& T4 X' X8 R8 O3 w! R! V6 Z; z$ R1 i v( u- H8 u6 ?( {6 G% A5 ~, n5 ~ W f, {; f" b, b( L- H4 B: l9 l+ `6 W- W# d$ c$ @, r4 O4 g/ W; I U9 I" ^. V0 W" o; L7 @* H& U, k8 y( u* t5 a# n% F3 }5 U+ P/ Q8 U# b4 Y! B# m1 e$ n1 U+ o9 H& }+ c- w/ j2 Z" w9 ~( @% q0 x- ]( W2 z7 e2 ~. k8 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 属性的值。