码迷,mamicode.com
首页 > Web开发 > 详细

Web前端开发如何利用css样式来控制Html中的h1/h2/h3标签不换行

时间:2014-08-18 16:09:42      阅读:1216      评论:0      收藏:0      [点我收藏+]

标签:style   http   color   使用   io   strong   ar   art   

 

     H1/H2/H3/H4标题标签常常使用在一个网页中唯一标题、重要栏目、重要标题等情形下。 H1在一个网页中最好只使用一次,如对一个网页唯一标题使用。H2、H3、H4标签则可以在一个网页中多次出现,但必要随意添加或添加过度。

     在Web前端开发中,经常要使用H1标签对关键字进行优化,可是如果是一行文字中的某个词加上了H1标记,就会换行。可以使用下面的方法,H标签就不会强制换行了。Css控制为一行文字中某个字加上<h2>标签不换行,display:inline; 解释为:内联对象的默认值。用该值将从对象中删除行.

 

     display:inline-block;  

 

虽然这样使用,基本上ie8和ie9、firfox、chrome浏览器都没问题,但是在ie6和ie7下,却是不行的。后面查证了相关资料,原来ie6和ie7是支持的,只是需

要增加一个hack即可,原来的代码改为如下即可兼容所有浏览器了:

 

display:inline-block;  

*display: inline;  

*zoom: 1; 

 

解决方法举例1:

<style type="text/css">

h1 {font-size: 12px;color: #000000; display : inline}

h2 {font-size: 12px;color: #000000; display : inline}

h3 {font-size: 12px;color: #000000; display : inline}

</style>  www.169it.com 

解决方法举例2:

<style type="text/css">

h1 {font-size: 12px;color: #000000; display : inline}

h2 {font-size: 12px;color: #000000; display : inline}

h3 {font-size: 12px;color: #000000; display : inline}

</style>

<h1>CSS控制不换行的方法</h1>

<h2>CSS控制不换行的方法</h2>

<h3>CSS控制不换行的方法</h3>

 


本文来源:Web前端开发如何利用css样式来控制Html中的h1/h2/h3标签不换行

Web前端开发如何利用css样式来控制Html中的h1/h2/h3标签不换行,布布扣,bubuko.com

Web前端开发如何利用css样式来控制Html中的h1/h2/h3标签不换行

标签:style   http   color   使用   io   strong   ar   art   

原文地址:http://www.cnblogs.com/besty/p/3919574.html

(0)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!