在html中如何设定span的宽度？这看上去是个很简单的问题，似乎用style中的width属性就可以。例如，

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml" >

 <head>

 <title>Test Span</title>

 <style type="text/css">

 span {

 background-color:#ffcc00;

 width:150px;

 }

 </style>

 </head>

 <body>

 fixed <span>width</span> span

 </body>

 </html>

通过试验以后发现，无效，无论是在Firefox还是IE中都无效。

通过查阅CSS2标准中关于width的定义发现，原来CSS中的width属性并不总是有效的，如果对象是inline对象，width属性就会被忽略。Firefox和IE原来是遵循了标准才这样做的。

修改span为block类型并设置float不是完美解决

在span的CSS中增加display属性，将span设置为block类型的Element，这样宽度的确有效了，不过也把前后文字隔在不同行里面。这样其实span就完全变成了div。

span {

background-color:#ffcc00;

display:block;

width:150px;

}

　　很多人会建议再增加一个CSS属性float，这样的确在某种条件下能解决问题。比如我们的例子中，如果span前面没有文字，那的确是可行的。但是如果有了，前后文字就会连在一起，而span跑到了第二行。

span {

background-color:#ffcc00;

display:block;

float:left;

width:150px;

}

button的情况

其实，在Html的各种Element中，的确有既是inline，又能够设定宽度的情况存在。例如下面代码就显示了button对象，就可以很好的在文字中间出现，并且设定宽度。

<body>

fixed <button style="width:150px;">width</button> button

</body>

　　那能不能让span象button那样显示呢？通过CSS2标准中display的定义和inline对象的解释，发现CSS2标准的制定者把所有的Element在是否属于inline上做了非此即彼的规定，要么是inline，要么是block，有没有制定button那样既是inline，又可以象block那样设置宽度的属性值。

更新的标准CSS 2.1

再看更新的标准，在CSS2.1标准草案中display的定义中增加了一个叫inline-block的属性值，针对的恰好是我们面对的这种情形。那么再看看各种浏览器的对应情况。

Firefox

通过display的文档了解到，inline-block在未来的Firefox 3中会实现。通过Mozllia扩展属性参考了解到，在Firefox 3以前的版本，例如现在的Firefox 2中，可以用-moz-inline-box达到同样的效果。

IE

通过MSDN中的display文档了解到，inline-block已经实现。实际测试发现IE 6.0以后都没问题。

完美的解决方案

下面代码的CSS定义完美解决了span的宽度设置问题。由于浏览器通常对不支持的CSS属性采取忽略处理的态度，所以最好将display:inline -block行写在后面，这样在Firefox里面，如果到了未来的Firefox 3，这一行就能起作用，代码可以同时兼容各种版本。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml" >

 <head>

 <title>Test Span</title>

 <style type="text/css">

 span {

 background-color:#ffcc00;

 display:-moz-inline-box;

 display:inline-block;

 width:150px;

 }

 </style>

 </head>

 <body>

 fixed <span>width</span> span

 </body>

 </html>

span设置宽度有效无效问题的更多相关文章

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

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

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

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

  3. 设置span的宽度

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

  4. 如何给span设置高度宽度？

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

  5. 表格单元格td设置宽度无效的解决办法 .

    http://zzstudy.offcn.com/archives/11366 在做table页面时,有时对td设置的宽度是无效的,td的宽度始终有内部的内容撑开,可以设置padding,但直接设置w ...

  6. span标签 宽度无效解决方案

    完美的解决方案 下 面代码的CSS定义完美解决了span的宽度设置问题. 由于浏览器通常对不支持的CSS属性采取忽略处理的态度, 所以最好将display:inline -block行写在后面,这样在 ...

  7. 完美解决了span的宽度设置

    下 面代码的CSS定义完美解决了span的宽度设置问题.由于浏览器通常对不支持的CSS属性采取忽略处理的态度,所以最好将display:inline -block行写在后面,这样在Firefox里面, ...

  8. 微信小程序的button按钮设置宽度无效

    亲,你是不是也遇到了微信小程序的button按钮设置宽度无效.让我来告诉你怎么弄 方法1. 样式中加入!important,即:width: 100% !important; wxss代码示例 1 2 ...

  9. 表格 td 设置宽度无效问题

    现在有个需求,就是表格的列不固定,都是动态加载的,想给每一列设置宽度,但是设置 width:100xp,没有效果,不过设置min-width:100px 就有效果了,table的宽度为 td的宽度和 ...

随机推荐

  1. WebSphere--安全性

    WebSphere应用服务器具有很好的安全性支持.安全性简单地说就是确定谁可访问重要的系统资源,这些系统资源包括文件.目录.程序.连接和数据库.以独立模式运行WebSphere应用服务器比作为 Web ...

  2. LINUX读写文件区别

    body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...

  3. RadioButton与监听

    public class MainActivity extends Activity implements OnCheckedChangeListener { <RadioGroup andro ...

  4. ATS日志说明

    在ATS日志中我们经常遇到形形色色的缓存结果码,为了更清晰地认识它们,相关资料整理到这里: TCP_HIT 请求对象的一份合法拷贝被缓存,ATS将发送该对象给client TCP_MISS 请求对象未 ...

  5. React-Native 之 Modal介绍与使用

    前言 遗漏的常用组件,刚发现官方有提供,这边也来介绍一下. 如本文有错或理解偏差欢迎联系我,会尽快改正更新! 如有什么问题,也可直接通过邮箱 277511806@qq.com 联系我. 本章涉及资源下 ...

  6. 看得懂的区块链，看不清的ICO人心

    比特币又开始下跌了,是狂欢尽头还是又一波调整,无从得知,背后的乱象会让监管者继续心烦,而这乱象对我来说,有时候会有些心寒. 你说我怎么可能想到,我一个写程序的人,突然有一天会发现,朋友圈里有一些搞技术 ...

  7. Chocolatey 和 Redis windows安装记录

    前言 最近研究redis,发现Redis没有官方的windows版本,但MsOpenTech有一直维护对应的Redis版本,其下载地址如下: https://github.com/MSOpenTech ...

  8. 所不为人知的Python装饰器

    装饰器可以说是Python中非常重要的特性之一.有些人要么从没使用过装饰器,要么就是对装饰器的使用一知半解.也有些人觉得装饰器很简单:"装饰器不就是那些把函数作为参数并输出一个函数的函数&q ...

  9. BZOJ 1488: [HNOI2009]图的同构 [Polya]

    完全图中选出不同构的简单图有多少个 上题简化版,只有两种颜色....直接copy就行了 太诡异了,刚才电脑上多了一个不动的鼠标指针,然后打开显卡管理界面就没了 #include<iostream ...

  10. Kafka基本知识回顾及复制

    Producers发布记录到集群,集群维护这些记录并且将记录分发给Consumers. 在Kafka中,最关键的抽象是topic.Producers发布记录到一个topic,Consumers订阅一个 ...