在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. alwaysOn中关于维护计划的应用方案

    由于alwaysOn环境下主副本所在的实际服务器不固定, 所以我目前采取的方案是创建维护计划的时候, 在各个服务器上创建一份维护计划. (假设有2个服务器需要故障转移, 那么就在这两个服务器上分别创建 ...

  2. PHP面试题超强总结（PHP中文网）

    PHP面试基础题目 1.双引号和单引号的区别 双引号解释变量,单引号不解释变量 双引号里插入单引号,其中单引号里如果有变量的话,变量解释 双引号的变量名后面必须要有一个非数字.字母.下划线的特殊字符, ...

  3. Selenium+java+idea的安装与配置

    当前操作系统:Windows10pro x64 一.安装JDK 1.到jdk官网下载一个对应当前系统的安装包(Selenium仅支持JDK1.8及以上版本) 网址:http://www.oracle. ...

  4. AngularJS执行流程详解(转)

    一.启动阶段 大家应该都知道,当浏览器加载一个HTML页面时,它会将HMTL页面先解析成DOM树,然后逐个加载DOM树中的每一个元素节点.我们可以把AngularJS当做一个类似jQuery的js库, ...

  5. 模块（module）

    1.模块加载 import math  //import后面跟模块名 from module1 import module11  //module1是一个大模块,里边有子模块module11,调用这个 ...

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

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

  7. 禁掉或启用firefox 的 javascript 脚本

    老版本的firefox可以直接在“选项”页设置启用或禁用javascript 脚本 新版的Firefox中,我找了半天,没有找到,看来是没法直接设置了 于是在 地址栏键入 about:config 搜 ...

  8. 转载-Oracle ORACLE的sign函数和DECODE函数

    原文地址:http://www.cnblogs.com/BetterWF/archive/2012/06/12/2545829.html 转载以备用 比较大小函数 sign 函数语法:sign(n) ...

  9. 洛谷 [P1578] WC2002 奶牛浴场

    本题是一道用极大化思想求最大子矩阵的经典题目.这个题目很出名,可以在百度搜索王知昆国家队dalao的论文,其中说的非常详细. 先枚举极大子矩形的左边界,然后从左到右依次扫描每一个障碍点,并不断修改可行 ...

  10. BZOJ 4008: [HNOI2015]亚瑟王 [DP 概率 !!!]

    传送门 题意: $r$轮$n$张卡牌,每一轮依次考虑每张卡牌,$p_i$概率发动造成$d_i$伤害后结束本轮或者继续考虑下一张 每张卡牌发动过之后以后都会跳过 求$r$轮之后的期望伤害 看了一节课出题 ...