span设置固定宽度

时间:2023-02-03 22:08:43

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

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

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

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

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

效果对比

span设置固定宽度

span设置固定宽度

下面对<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设置固定宽度

一、形如<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设置固定宽度

二、形如<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>

测试效果:

span设置固定宽度

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

测试效果:

span设置固定宽度

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

span设置固定宽度的更多相关文章

  1. 实现span设置宽度(行内元素本来不支持调宽度高度这些样式)(变成行内块元素:display&colon;inline-block&semi;)

    实现span设置宽度(行内元素本来不支持调宽度高度这些样式)(变成行内块元素:display:inline-block;) 一.总结 1.将span从行内元素变成行内快元素就可以调了: 设置样式的时候 ...

  2. 如何给span设置高度宽度?

    内容提要:给Span设置高度和宽度后没有作用.本文介绍了如何如何给span设置高度宽度. CSS模型中经常用的容器是DIV和span. 给Span设置高度和宽度后没有作用. <style typ ...

  3. 关于label和span设置width无效问题解决方法

    转:http://www.jb51.net/web/113507.html 大家可能不知道默认情况下label.span 设置width 是无效的,只有当display:block时,我们所设置的wi ...

  4. span设置宽度有效无效问题

    在html中如何设定span的宽度?这看上去是个很简单的问题,似乎用style中的width属性就可以.例如, <!DOCTYPE html PUBLIC "-//W3C//DTD X ...

  5. 解决bootstrap row span设置border换行的问题

    Hadoop方面的毕业设计告一段落了,趁这几天空闲时间认真学习一下之前常使用但是却没用好的Bootstrap. 本文记录Bootstrap框架使用栅格系统时,遇到row内的span设置border换行 ...

  6. 利用span设置文字固定宽度

    <input type="radio" name="dispMode" id="rdoManul" value="manul ...

  7. 对span设置鼠标光标样式

    <html> <body> <p>请把鼠标移动到单词上,可以看到鼠标指针发生变化:</p> <span style="cursor:au ...

  8. 父元素设置固定宽度并设置overflow&colon;scroll,如何让子元素撑开父元素

    <div class="a"> <div class="b"> <div class="c">内容内容, ...

  9. table表格 td设置固定宽度

    table宽度自适应,而且部分TD是固定宽度. 只需要将固定宽设死,留下一列不设置宽度,将table宽度设置为100%. table-layout:fixed 作用不是很清楚 <table wi ...

随机推荐

  1. POJ 2823 Sliding Window &plus; 单调队列

    一.概念介绍 1. 双端队列 双端队列是一种线性表,是一种特殊的队列,遵守先进先出的原则.双端队列支持以下4种操作: (1)   从队首删除 (2)   从队尾删除 (3)   从队尾插入 (4)   ...

  2. cms替换主页的步骤

    cms替换主页的步骤 .先做好静态页面: .在D:\wamp\www\phpcms\install_package\phpcms\templates文件夹下建新的文件夹tianqiwangluo(项目 ...

  3. Windows Live Writer编写Octopress

    Windows live Writer是一个可以用来离线编写,并发布博客的工具. Octopress是一个静态博客生成系统.使用群体多是geek,主要有显示代码清晰,git同步,并且不用购买空间的特点 ...

  4. SPOJ 0962 Intergalactic Map

    题目大意:在一个无向图中,一个人要从A点赶往B点,之后再赶往C点,且要求中途不能多次经过同一个点.问是否存在这样的路线.(3 <= N <= 30011, 1 <= M <= ...

  5. CSS3学习系列之盒样式(二)

    text-overflow属性 当通过把overflow属性的属性值设定为"hidden"的方法,将盒中容纳不下的内容隐藏起来时,如果使用text-overflow属性,可以在盒的 ...

  6. iOS 之 protocol的相关问题

    定义一个协议, 一个协议可以扩展子另一个协议 如果需要扩展多个协议中间使用逗号分隔 //定义一个协议 @protocol AnimalDelegate <NSObject, ***> @r ...

  7. 这是我对GET与POST的区别的回答

    不知在哪里看到的这种答案,之前很长一段时间对GET与POST的区别理解如下 一是GET数据附加在URL之后,是显示的,不安全的,POST反之. 二是数据大小限制,GET受URL长度限制,数据有限,PO ...

  8. windows日志监控

    bat脚本,主要作用,每个五分钟读取日文本件中新增内容,进行错误赛选,如果有错误信息,将错误信息用邮件发送给管理员. 其中awk和sed需要手动下载 :读取number.txt文档,获取上一次执行时文 ...

  9. 【cocos 2d-x】VS2013&plus;cocos2d-x3&period;3Final&plus;Adriod交叉编译环境配置(超详细版)

    本系列文章由@二货梦想家张程 所写,转载请注明出处. 作者:ZeeCoder  微博链接:http://weibo.com/zc463717263 我的邮箱:michealfloyd@126.com ...

  10. js实现图片旋转

    1.以下代码适用ie9版本 js代码如下: function rotate(o,p){ var img = document.getElementById(o); if(!img || !p) ret ...