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

happyxp

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

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

9 |% D% g, L0 N! [/ v* ^

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

不

$ t/ X2 p2 n: Q5 y/ C

自动

换行

& Q0 V8 v2 r1 ?3 y

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

( o) E8 C7 F: \7 X8 B

 

以下是display的用法和定义：

4 u- j* u- C7 C% ]( \

 

5 [6 h& t7 U7 x: s6 C, W( h

定义和用法

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

说明

- ]; z5 _9 x: }' D' S

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

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

9 V( b2 d7 X3 i! g4 z( }, X. J2 Q2 H& p/ I, K$ a: j# Z+ Q! c. Z3 g3 {5 V4 Y, N( J# w2 E( S( g% n! z- ~" z7 V$ R) D6 a2 `( M# B M/ ]5 C5 d/ N8 B4 l3 ?7 V$ o4 r4 ~- z3 [2 |4 O1 H# S

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

7 J5 |3 |1 [2 p* L9 \# C

" K+ t! p% _, _* @$ U4 X+ D

实例

( o ^7 p( Z; h: K; o! ^

使段落生出行内框：

p.inline
  {
1 y$ h* ?% _! I0 s  display:inline;
  }

; N8 f$ @/ K! R9 D- F( ?% Z

浏览器支持

1 u/ o ?) G1 ]$ {, ?6 b3 U

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

0 f/ I% p2 ]$ f/ Q5 Q+ 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"。

" S3 x; x# X. _ c% r

可能的值

0 U2 t" {+ r$ c3 ]; k, j6 ^4 N, R. V4 H- `9 P& |& ^8 E5 l3 n/ p; W( U- [( @1 l- P+ ~. p% A$ U7 O% N; F+ W. U$ W/ ^9 u5 x& T/ [$ L% l c* V8 }( p1 l* I& s8 b7 a& u% {* {' z, d3 i# N6 r0 j, a9 [/ E2 o; Y& g3 o* s0 I7 Z2 p7 j% l' ?7 |% h- q/ ?$ ~* K- E& h7 E! r P$ b T9 C1 V8 l6 K |! f" G) `. \; l$ e' l) }/ r8 _; O: c! V( q: L4 E) ?4 O( G8 p% H, E# r+ [8 p3 p8 p p( u+ |) |3 S* f4 C9 z1 d1 o. g" G* d2 U1 q2 e& R4 J0 `) N% i8 x& }( g' B; k0 W. |, ?' Z( r; G$ A! a" w8 V8 H% ?- X0 i% T) S8 @0 L H# ]# S8 y% B% ]# V, x1 W# A4 v8 G7 \ y& @% }5 s: ?, S) z) F% S" ^) N* |( Q+ S$ F3 w8 Y9 u2 v; @$ P; Q4 b* d- W% D5 |/ n& W; B- p4 W& Z4 {. V: N1 g {. ~+ ^4 \0 H6 Y5 _9 e* e1 h0 v$ E; [ W; {, u# X5 j# j' P2 x% ~, x) F5 P' n1 f: u5 m8 K# L; I9 N6 d* _& t! G/ c" K; b' l! p/ a S8 T- h" p' z% c( u& j# Z6 E* E, P A: c7 e$ E( M+ N9 G8 i9 m9 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 属性的值。