如何用css为span标签设置固定宽度，在页面中为span标签指定宽度，包括独立行固定宽度、同行固定宽度和同行居中固定宽度，涉及到css设置span标签样式的方法，多个实例。
css中span标签的固定宽度：
包括独立行固定宽度、同行固定宽度和同行居中固定宽度。
关于span标签浮动靠右对齐方法，目前考虑到兼容ie6前提下，似乎只有反向浮动和相对定位两种方式（参文末），没发现更好的方法。
一、形如<span>abc</span>独立行设置span为固定宽度
方法如下：
span {width:60px; text-align:center; display:block; }
实例：
复制代码 代码示例:
<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="" type="text/
javascript"$amp;>amp;$lt;/script$amp;>amp;$lt;script src="" type="text/javascript"$amp;>amp;$lt;/script$amp;>amp;$lt;script type="text/javascript"$amp;>amp;$lt;/script>
测试结果：
二、形如<span>abc</span>def格式行设置span为固定宽度
方法如下：
span {width:60px; text-align:center; display:block; float:left;}
实例：
复制代码 代码示例:
<style type="text/css">
.sb {width:300px;list-style:none;font-size:15px;}
.sb li {list-style:none;width:100%;margin:10px 0px 0px 0px;}
.sb span {width:100px; text-align:center; display:block; float:left; background:#C00;color:#FFF;}
</style>
<ul class="sb">
<li$amp;>amp;$lt;span>天缘</span>博客</li>
<li$amp;>amp;$lt;span>天缘博客</span>欢迎</li>
<li$amp;>amp;$lt;span>天 缘 博 客</span>欢 迎 光 临</li>
</ul>
<script src="" type="text/javascript"$amp;>amp;$lt;/script$amp;>amp;$lt;script src="" type="text/javascript"$amp;>amp;$lt;/script$amp;>amp;$lt;script type="text/javascript"$amp;>amp;$lt;/script>
测试结果：
三、形如ABC<span>DEF</span>GH格式行设置SPAN为固定宽度
方法：
span {width:60px; text-align:center; display:inline-block;}
实例：
复制代码 代码示例:
<style type="text/css">
.sc {width:300px;list-style:none;font-size:15px;}
.sc li {list-style:none;width:100%;margin:10px 0px 0px 0px;}
.sc span {width:100px; text-align:center; display:inline-block; background:#C00;color:#FFF;}
</style>
<ul class="sc">
<li>Welcome to <span>天缘</span>博客</li>
<li>Welcome to <span>天缘博客</span>欢迎</li>
<li>Welcome to <span>天 缘 博 客</span>欢 迎 光 临</li>
</ul>
<script src="" type="text/javascript"$amp;>amp;$lt;/script$amp;>amp;$lt;script src="" type="text/javascript"$amp;>amp;$lt;/script$amp;>amp;$lt;script type="text/javascript"$amp;>amp;$lt;/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$amp;>amp;$lt;/li>里头的bbb靠右对齐且不换行？
如果对span使用float属性，在IE6下会导致span换到下一行，Firefox则正常。可以采用下面相对定位方法实现同行且居右对齐。
li { position:relative;}
li span{ position:absolute;right:0px;}
即可实现。
2、反着写<span>也比较方便
比如写做<li$amp;>amp;$lt;span>AAA</span>BBB</li>，这样把AAA放到SPAN里，BBB放到外面。只需要：
li {text-align:right;}
li span{float:left;}
<!-- google_ad_section_end -->
