本文总结CSS中SPAN标签的固定宽度设置问题,一般在日志文章标题+日期展示时经常遇到,所以就顺便把SPAN几种组合情况一起汇总一下。包括独立行固定宽度、同行固定宽度和同行居中固定宽度。关于SPAN标签浮动靠右对齐方法,目前考虑到兼容IE6前提下,似乎只有反向浮动和相对定位两种方式(参文末),没发现更好的方法。
一、形如<span>ABC</span>独立行设置SPAN为固定宽度
方法如下:
span {width:60px; text-align:center; display:block; }
实际验证结果:IE6 OK, FIREFOX 3 OK。
测试实例:
<style type= "text/css" > |
.sa span { width : 100px ; text-align : center ; display : block ; background : #C00 ; margin : 10px 0px 0px 0px ; color : #FFF ; font-size : 15px ;} |
</style> |
<div class= "sa" > |
<span>天缘</span> |
<span>天缘博客</span> |
<span>天 缘 博 客</span> |
</div> |
测试结果:
二、形如<span>ABC</span>DEF格式行设置SPAN为固定宽度
方法如下:
span {width:60px; text-align:center; display:block; float:left;}
实际验证结果:IE6 OK, FIREFOX 3 OK。
测试实例:
01 | <style type= "text/css" > |
02 | .sb { width : 300px ; list-style : none ; font-size : 15px ;} |
03 | .sb li { list-style : none ; width : 100% ; margin : 10px 0px 0px 0px ;} |
04 | .sb span { width : 100px ; text-align : center ; display : block ; float : left ; background : #C00 ; color : #FFF ;} |
05 | </style> |
06 | <ul class= "sb" > |
07 | <li><span>天缘</span>博客</li> |
08 | <li><span>天缘博客</span>欢迎</li> |
09 | <li><span>天 缘 博 客</span>欢 迎 光 临</li> |
10 | </ul> |
测试结果:
三、形如ABC<span>DEF</span>GH格式行设置SPAN为固定宽度
方法如下:
span {width:60px; text-align:center; display:inline-block;}
实际验证结果:IE6 OK, FIREFOX 3 OK。
测试实例:
01 | <style type= "text/css" > |
02 | .sc { width : 300px ; list-style : none ; font-size : 15px ;} |
03 | .sc li { list-style : none ; width : 100% ; margin : 10px 0px 0px 0px ;} |
04 | .sc span { width : 100px ; text-align : center ; display :inline- block ; background : #C00 ; color : #FFF ;} |
05 | </style> |
06 | <ul class= "sc" > |
07 | <li>Welcome to <span>天缘</span>博客</li> |
08 | <li>Welcome to <span>天缘博客</span>欢迎</li> |
09 | <li>Welcome to <span>天 缘 博 客</span>欢 迎 光 临</li> |
10 | </ul> |
测试结果:
提示:完美兼容就是把display属性设为inline-block,同时也可兼容前两种情况。
四、block,inline,inline-block之间区别
display:block;——类似与DIV标签的宽高边距等属性均可定制的元素特性;
display:inline;——类似与<a>、<strong>标签的宽高等属性不可定制的元素特性;
display:inline-block;——“全”可定制属性的元素特性;
五、如何设置让SPAN float:right不换行
1、如何让<li>AAA<span>BBB</span></li>里头的BBB靠右对齐且不换行?
如果对span使用float属性,在IE6下会导致span换到下一行,Firefox则正常。可以采用下面相对定位方法实现同行且居右对齐。
li { position:relative;}
li span{ position:absolute;right:0px;}
即可实现。
2、反着写<span>也比较方便
比如写做<li><span>AAA</span>BBB</li>,这样把AAA放到SPAN里,BBB放到外面。只需要:
li {text-align:right;}
li span{float:left;}
<!-- google_ad_section_end -->