在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. java1.8--改进的接口

    关于接口,每天的编码都在写,就不多说了.这里对比下接口,抽象类,类3者的关系: 1),接口是一种规范,就是告诉外界这个东东可以做什么. 2),抽象类是一种模板,就是告诉外界这个东西的一部分公共功能. ...

  2. Redis进阶实践之八Lua的Cjson在Linux下安装、使用和用C#调用Lua脚本

    一.引言         学习Redis也有一段时间了,感触还是颇多的,但是自己很清楚,路还很长,还要继续.上一篇文章简要的介绍了如何在Linux环境下安装Lua,并介绍了在Linux环境下如何编写L ...

  3. hibernate 持久化对象的三个状态

    Hibernate中的对象有3种状态 瞬时对象(TransientObjects).持久化对象(PersistentObjects)和离线对象(DetachedObjects也叫做脱管对象) Tran ...

  4. javascript 中的console.log有什么作用啊？

    相比alert他的优点是: 他能看到结构话的东西,如果是alert,淡出一个对象就是[object object],但是console能看到对象的内容. console不会打断你页面的操作,如果用al ...

  5. JVM的内存分区

    JVM的内存分区 这篇文章尝试讨论清楚JVM的内存分区情况. 1.       JVM的内存和系统内存的关系 下图是对系统内存及JVM内存的大致描绘 对大多数操作系统,内存可以分为物理内存RAM及Sw ...

  6. 前端自动化测试神器-Katalon进阶用法

    前言 上一篇介绍了Katalon的基础用法,本篇继续介绍一些进阶的用法. Keyword 和 Method Call Statement Keyword Keyword就是自定义方法,该方法在当前项目 ...

  7. c# HTTP技术

    种植头发能完全成活吗?头发上出现了掉落,头发变细等情况下是需要去看看是不是皮下的毛囊出了问题,要解决这个头发脱发上,选择植发的方式能有效改善,不过也不要小看这个头发脱发,脱发后如果不加以做好毛发护理, ...

  8. 玩转spring boot——简单登录认证

    前言 在一个web项目中,某些页面是可以匿名访问的,但有些页面则不能.spring mvc提供了HandlerInterceptor接口来应对,只需要重写preHandle方法便可以实现此功能.那么使 ...

  9. Java 常用List集合使用场景分析

    Java 常用List集合使用场景分析 过年前的最后一篇,本章通过介绍ArrayList,LinkedList,Vector,CopyOnWriteArrayList 底层实现原理和四个集合的区别.让 ...

  10. 为MySQL选择合适的备份方式[转]

    原文链接:http://nettedfish.sinaapp.com/blog/2013/05/31/choose-suitable-backup-strategy-for-mysql/ 数据库的备份 ...