CSS中如何把Span标签设置为固定宽度

本文总结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>

<script src="http://www.metsky.com/js/code/shCore.js" type="text/javascript"></script><script src="http://www.metsky.com/js/code/shBrushCss.js" type="text/javascript"></script><script type="text/javascript"></script>

测试结果：

 二、形如<span>ABC</span>DEF格式行设置SPAN为固定宽度

方法如下：

span {width:60px; text-align:center;  display:block; float:left;}

实际验证结果：IE6 OK， FIREFOX 3 OK。

测试实例：

view source

print?

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>

<script src="http://www.metsky.com/js/code/shCore.js" type="text/javascript"></script><script src="http://www.metsky.com/js/code/shBrushCss.js" type="text/javascript"></script><script type="text/javascript"></script>

测试结果：

三、形如ABC<span>DEF</span>GH格式行设置SPAN为固定宽度

方法如下：

span {width:60px; text-align:center;  display:inline-block;}

实际验证结果：IE6 OK， FIREFOX 3 OK。

测试实例：

view source

print?

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>

<script src="http://www.metsky.com/js/code/shCore.js" type="text/javascript"></script><script src="http://www.metsky.com/js/code/shBrushCss.js" type="text/javascript"></script><script type="text/javascript"></script>

测试结果：

提示：完美兼容就是把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 -->