span设置固定宽度

当前位置 : 首页 > 网页制作 > CSS > span设置固定宽度

span设置固定宽度

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


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

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

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

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

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

效果对比

\

\

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

原始代码:


张连海 张 连 海



效果如下:

\


<喎"http://www.2cto.com/kf/ware/vc/" target="_blank" class="keylink">vcD4KPC9ibG9ja3F1b3RlPgo8cD48c3Ryb25nPtK7oaLQzsjnPHNwYW4+QUJDPC9zcGFuPrbAwaLQ0Mno1sNTUEFOzqq5zLaov+22yDwvc3Ryb25nPjwvcD4KPHA+ICAgILe9t6jI58/Co7o8L3A+CjxibG9ja3F1b3RlPgo8cD48L3A+CjxibG9ja3F1b3RlPgo8cD48cHJlIGNsYXNzPQ=="brush:java;">span {width:60px;text-align:center; display:block; }

测试实例:


张连海 张 连 海

测试效果:

\


二、形如ABCDEF格式行设置SPAN为固定宽度

方法如下:

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


测试实例:


  • 张连海博客
  • 张 连 海欢 迎 光 临

测试效果:

\


三、形如ABCDEFGH格式行设置SPAN为固定宽度

方法如下:

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

测试实例:


  • Welcome to 张连海博客
  • Welcome to 张 连 海欢 迎 光 临

测试效果:

\


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


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

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

display:inline;——类似与标签的宽高等属性不可定制的元素特性;

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


五、如何设置让SPANfloat:right不换行

1、如何让

  • AAABBB
  • 里头的BBB靠右对齐且不换行?

    如果对span使用float属性,在IE6下会导致span换到下一行,Firefox则正常。可以采用下面相对定位方法实现同行且居右对齐,即可实现。

    li {position:relative;}
    li span{position:absolute;right:0px;}


    2、反着写也比较方便

    比如写做

  • AAABBB
  • ,这样把AAA放到SPAN里,BBB放到外面。只需要:

    li {text-align:right;}
    li span{float:left;}
    


    Tag:
    网友评论
    
    <