span设置固定宽度

原创 2013年12月04日 22:34:34


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

    在做"善良公社"项目时,用到了SPAN,因为是用来实现放块效果,所以给它定义了固定宽度,本以为胸有成竹的事,可执行网页时发现设定的宽度没有效果,让我郁闷了几分钟,看似很简单的样式定义尽然是无效。后来网上搜索了相关资料,是这么解释的:CSS中的width属性并不总是有效的,如果对象是inline对象,width属性就会被忽略。FirefoxIE原来是遵循了标准才这样做的。 

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

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属性,在IE下会导致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;}


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

让span有固定宽度 兼容IE和firefox

最终代码   1.   ------------------------------------         解释下过程     ...

span设置宽度有效无效问题

缺省情况下span的宽度设定无效 在html中如何设定span的宽度?这看上去是个很简单的问题,似乎用style中的width属性就可以。例如, YPE html PUBLIC "-//W3C//...

设置span的宽度

引自:http://blog.sina.com.cn/s/blog_70b0792b0100uqfl.html 在默认的情况下,利用css样式对span进行宽度设定是无效,但有时为了某种排版的要求...

如何设置HTML span、label 的宽度

该文讲述如何设定 HTML span 宽度。 缺省情况 HTML span 的宽度设定无效 在 HTML 中如何设定 span 的宽度?这看上去是个很简单的问题,似乎用 style 中的 wi...

span设置宽度有效无效问题

缺省情况下span的宽度设定无效 在html中如何设定span的宽度?这看上去是个很简单的问题,似乎用style中的width属性就可以。例如, YPE html PUBLIC "-//W3C//...

设置span的宽度

在默认的情况下,利用css样式对span进行宽度设定是无效,但有时为了某种排版的要求,需要对span进行宽度设定,那么如何在html中利用css样式设定span的宽度? 思路:这看上去是个很简单...

Android 设置ImageView宽度固定,其高度按比例缩放适应

Android设置ImageView宽度固定,其高度按比例缩放适应。。。

css3实现固定表格头部而无需设置单元格td的宽度

本博客持续修改与更新中,点击这里查看最新的内容背景最近小弟在工作都是做后台系统,一堆的表格,各种各样的。然后需求上要有固定的表头的表格,如下图所示在网上查询固定表头的实现方式为: thead 设置为...

HTML固定列表宽度,超出部分自动隐藏,设置2倍行距,单元格占据两行、两列

HTML固定列表宽度,使得每一个单元格宽度相等,单元格中超出列宽的部分自动隐藏。设置2倍行距,最右下角单元格占据两行、两列。 计算机组成原理 JAVA程序设计高级篇 编译原理 ...

span无法确定宽度的解决方案

Test Span span { background-color:#ffcc00; width:150px ; } fixed width span 通过试验以后发...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)