在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. U盘安装CentOS 7问题解决

    1 使用U盘安装最新版Centos时报错(CentOS-7-x86_64-DVD-1503-01): 错误提示:"Warning:could not boot;Warning: /dev/r ...

  2. 四、Html常用标签

    1,列表相关标签 <ul>:定义无序列表,只能包含<li>子元素 <ol>:定义有序列表,只能包含<li>子元素,因为这个标签是有序的,所有这个标签还有 ...

  3. linkin大话设计模式--代理模式

    代理模式是一种应用非常广泛的设计模式,当客户端代码需要调用某个对象的时候,客户端并不关心是否可以准确的得到这个对象,他只要一个能够提供该功能的对象而已,此时我们就可以返回该对象的代理.总而言之,客户端 ...

  4. java 常见的几种运行时异常RuntimeException

    常见的几种如下:   NullPointerException - 空指针引用异常ClassCastException - 类型强制转换异常.IllegalArgumentException - 传递 ...

  5. 【转】awk数组操作

    转自:http://blog.csdn.net/wangran51/article/details/9168361 用awk进行文本处理,少不了就是它的数组处理.那么awk数组有那些特点,一般常见运算 ...

  6. 认识Webpack

    认识Webpack   网上已经有不少Webpack教程入门教程了. 本文记录了我以我的方式方法.思路认识了解Webpack.从官方的Tutorial入手,不断提出问题.解决,一步一步认识Webpac ...

  7. MySql-5.7.17-20解压缩版安装配置

    MySql-5.7.XXX解压缩版安装配置   1.mysql-5.7.20是解压版免安装的,版本下载地址:http://dev.mysql.com/downloads/mysql/ 如下图 2.解压 ...

  8. 从零开始学习前端JAVASCRIPT — 10、JavaScript基础ES6（ECMAScript6.0）

    ECMAScript 6.0(简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了.它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发 ...

  9. [DeeplearningAI笔记]改善深层神经网络1.1_1.3深度学习使用层面_偏差/方差/欠拟合/过拟合/训练集/验证集/测试集

    觉得有用的话,欢迎一起讨论相互学习~Follow Me 1.1 训练/开发/测试集 对于一个数据集而言,可以将一个数据集分为三个部分,一部分作为训练集,一部分作为简单交叉验证集(dev)有时候也成为验 ...

  10. 序列化日期（yyyy-MM-dd hh:mm:ss）

    var getDateFormat = function() { var _date = new Date(); //实例化一个Date对象 var _complete = function(valu ...