在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. 在Tomcat中实现基本的HTTP方式的验证

    .实现基本验证 (1)在C:\jakarta-tomcat-5.0.19\conf下的tomcat-users.xml文件中添加角色和用户(可以同时添加多个用户) <role rolename= ...

  2. 一个HTTP Basic Authentication引发的异常

    这几天在做一个功能,其实很简单.就是调用几个外部的API,返回数据后进行组装然后成为新的接口.其中一个API是一个很奇葩的API,虽然是基于HTTP的,但既没有基于SOAP规范,也不是Restful风 ...

  3. VUE环境配置步骤及相关Git Bash命令的使用

    组件式开发中,一定少不了Vue,废话少说,开始进行Vue应用前的关键性配置 备注:(为方便进行配置,提前可以安装Git bash,下载路径——https://git-scm.com/downloads ...

  4. ABP官方文档翻译 3.8 数据过滤器

    数据过滤器 介绍 预定义过滤器 ISoftDelete 何时使用? IMustHaveTenant 何时使用? IMayHaveTenant 何时使用 禁用过滤器 关于using语句 关于多租户 全局 ...

  5. BZOJ 3963: [WF2011]MachineWorks [CDQ分治 斜率优化DP]

    传送门 当然了WF的题uva hdu上也有 你的公司获得了一个厂房N天的使用权和一笔启动资金,你打算在这N天里租借机器进行生产来获得收益.可以租借的机器有M台.每台机器有四个参数D,P,R,G.你可以 ...

  6. 关于WebApi 跨域问题的解决的方式

    最近在做WebApi 进行开发的时候 一直会遇到跨域方面的问题那么如何进行跨域问题其实非常的简单. 1.一直在使用WebApi的时候总是遇到跨域的问题 那么 什么是跨域?跨域,指的是浏览器不能执行其他 ...

  7. oneNote总结

    22.添加附加文件删除后,文件大小没有发生改变的(优化文件和清空回收站)

  8. ubuntu的网络配置

    1,检查网络是否通畅 ping www.baidu.com 2,检查网线是否插好 3,使用ifconfig查看当前活跃网络接口 ifconfig 4,配置IP地址.子网掩码.网关地址 sudo vi ...

  9. redis新手入门，摸不着头脑可以看看<二>

    对<Redis开发与运维>的理解--下文中引号部分来自该书,略有修改 P19.  Redis有序集合(图2-1) "Redis有序集合和集合一样也是某种类型元素的集合,不重复.不 ...

  10. 关闭sublime自动检测更新提示

    在使用sublime text 3的时候,有自动更新的话再打开的时候总是提醒更新,这让我这个强迫症重度患者非常难受,要取消自动检查更新,点击菜单栏"Preferences"=> ...