admin管理员组文章数量:1566991
2024年7月18日发(作者：)
CSS中如何把Span标签设置为固定宽度
SPAN标签相信对一般的网页设计师来讲是非常熟悉的朋友了，使用相当频繁，但我们往往很
少对SPAN设定样式，一般也没什么必要，大多数都留给DIV老朋友了。
今天在实现一个效果中加入了SPAN，因为是用来实现放块效果，所以给它定义了固定宽度，
本以为胸有成竹的事，可执行网页时发现设定的宽度没有效果，让我郁闷了几分钟，看似很简
单的样式定义尽然是无效
后来网上搜索了相关资料，是怎么解释的：
CSS中的width属性并不总是有效的，如果对象是inline对象，width属性就会被忽略。
Firefox和IE原来是遵循了标准才这样做的。
原因知道后，解决方案也就出来了，如下代码所示：
一、形如ABC独立行设置SPAN为固定宽度方法如下：
span {width:60px; text-align:center; display:block; }
实际验证结果：IE6 OK， FIREFOX 3 OK。
一、形如ABCDEF格式行设置SPAN为固定宽度的方法如下：
span {width:60px; text-align:center; display:block; float:left;}
实际验证结果：IE6 OK， FIREFOX 3 OK。
二、形如ABCDEFGH格式行设置SPAN为固定宽度的方法如下：
span {width:60px; text-align:center; display:inline-block;}
实际验证结果：IE6 OK， FIREFOX 3 OK。
提示：完美兼容就是把display属性设为inline-block，同时也可兼容前两种情况。
block，inline，inline-block的区别：
display:block;——类似与DIV标签的宽高边距等属性均可定制的元素特性；
display:inline;——类似与、标签的宽高等属性不可定制的元素特性；
display:inline-block;——“全”可定制属性的元素特性；
最佳通用方法：span {
background-color:#ffcc00;
display:-moz-inline-box;
display:inline-block;
width:150px;
}
问题解决，希望对正在看着篇文章的你有帮助！
补充：
1、如何让
答：如果对span使用float属性，总是导致span换到下一行。可以采用下面方法实现同行且
居右对齐。
li { position:relative;}
li span{ position:absolute;right:0px;}
即可实现。
版权声明：本文标题：CSS中如何把Span标签设置为固定宽度 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dongtai/1721263866a868689.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论