span设置固定宽度

        <span> 标签是被用来组合文档中的行内元素。相信对一般的网页设计师来讲是非常熟悉的朋友了，使用相当频繁，但我们往往很少对SPAN设定样式，一般也没什么必要，大多数都留给DIV老朋友了。 

    在做"善良公社"项目时，用到了SPAN，因为是用来实现放块效果，所以给它定义了固定宽度，本以为胸有成竹的事，可执行网页时发现设定的宽度没有效果，让我郁闷了几分钟，看似很简单的样式定义尽然是无效。后来网上搜索了相关资料，是这么解释的： 

        CSS中的width属性并不总是有效的，如果对象是inline对象，width属性就会被忽略。Firefox和IE原来是遵循了标准才这样做的。 

    原因知道后，解决方案也就出来了，添加代码所示： 

 

style="width:600px;text-align:left;display:inline-block;"

 

    效果对比 

 

 

 

 

 

         下面对<span>标签进行一下详细介绍。

    原始代码：

 

 

<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>
<div class="sa">
    <span>张连海</span>
    <span>张 连 海</span>
</div>

 

 

 

    效果如下：

 

 

一、形如<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>
</div>

 

 

    测试效果：

 

 

二、形如<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><span>张连海</span>博客</li>
    <li><span>张 连 海</span>欢 迎 光 临</li>
</ul>

 

 

    测试效果：

 

 

三、形如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>
</ul>

 

 

    测试效果：

 

 

    提示：完美兼容就是把display属性设为inline-block，同时也可兼容前两种情况。

四、block，inline，inline-block之间区别

    display:block;——类似与DIV标签的宽高边距等属性均可定制的元素特性；

    display:inline;——类似与<a>、<strong>标签的宽高等属性不可定制的元素特性；

    display:inline-block;——“全”可定制属性的元素特性； 

五、如何设置让SPANfloat: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;}