html 中设置span的width完美解决方法

在默认情况下,由于span是行标签,设置width是无效的。只有改变display的属性,才可以实现设置宽度。

1.初步想法


span{

  background-color:#ccc;

  display:block;

  width:50px;

}

如果想span单独成行,不与前后内容链接,可以这样写。如果不想如此,还需修改:

2、再次修改,用上float,变成同行


span{

  background-color:#ccc;

  display:block;

  float:left;

  width:50px;

}

但如果span前面没有文字,那的确是可行的。但是如果有了,前后文字就会连在一起,而span跑到了第二行。

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

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

在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以后都没问题。

3.完美之法


span{

  background-color:#ccc;

  display:-moz-inline-box;

  display:inline-block;

  width:150px;

}

时间: 2024-10-05 04:03:56

html 中设置span的width完美解决方法的相关文章

head标签中的title,link,meta等的元素错位显示到body里面去了的完美解决方法

问题展现就像上图所示,head中什么都没有,head中的标签全部错位到body中显示,在页面的直观表现就是无故多处一行空白,很多人觉得这是编码者没有写好闭合标签的问题,嗯,是有可能,但不说现在的浏览器大都能自动补全未闭合标签,未写闭合标签也不至于让head中的内容完全移步到body中去吧.... 解决方法: 这个问题其实是由编码格式引起的,没错,就是BOM的问题,选一个比较高级的编辑器,个人推荐Notepad++,打开后选择 格式 选择以无BOM格式编码保存文档,然后就可以了. 嗯,就是这样子,

PHP LINUX Notice: undefined $_GET完美解决方法

PHP Notice: undefined 平时用$_GET['xx'] 取得参数值时,如果之前不加判断在未传进参数时会出现这样的警告: PHP Notice: undefined index xxx 虽然可以通过设置错误显示方式来隐藏这个提示,但是这样也有隐患,就是在服务器的日志中会记录这些提示,导致日志文件异常庞大!下面是引用网上流行的解决方法: 首先,这个不是错误,是warning.所以如果服务器不能改,每个变量使用前应当先定义. 方法1:服务器配置修改修改php.ini配置文件,erro

jquery中checkbox全选失效的解决方法

这篇文章主要介绍了jquery中checkbox全选失效的解决方法,需要的朋友可以参考下 如果你使用jQuery 1.6 ,代码if ( $(elem).attr(“checked”) ),将获得一个属性(attribute) ,它不改变该复选框被选中和选中.它只是用来存储默认或选中属性的初始值.为了保持向后兼容,.attr() 方法从 jQuery 1.6.1+ 开始除了返回属性值外,还会更新 property 属性,因此 boolean attribute(布尔属性)不需要通过 .prop(

谷歌、火狐浏览器下实现JS跨域iframe高度自适应的完美解决方法,跨域调用JS不再是难题!

谷歌.火狐浏览器下实现JS跨域iframe高度自适应的解决方法 导读:今天开发的时候遇到个iframe自适应高度的问题,相信大家对这个不陌生,但是一般我们都是在同一个项目使用iframe嵌套页面,这个ifame高度自适应网上一搜一大把,今天要讲的如何在不同的网站下进行相互的调用跟在同一个网站下是一个效果:例如我在自己的项目里面Iframe  了第一博客的页面  http://www.diyibk.com/   当第一博客的页面高度变化了怎么通知父页面呢? 这个时候在谷歌下肯定是拿不到 ifram

【LaTex】Texstudio中中文文本乱码问题的解决方法

Texstudio中中文文本乱码问题的解决方法:1.因为默认编码是UTF8,ctex的编码是GBK,所以出现乱码.将texstudio编码设成GBK乱码自然消失.2.通过拷贝粘贴,不会出现乱码.3.texstudio构建的编译平台是pdflatex,GBK编码时无需加UTF8选项,加了反而慢,甚至出错.不知为什么?4.编码是UTF8时,宜用xelatex编译,很快.5.Sublimetext可将GBK编码转存为UTF8,转存后用texstudio打开不会出现乱码.如果出现将默认编码改成UTF8就

Windows中openProcess函数返回ERROR_ACCESS_DENIED的解决方法

辛辛苦苦开始了创业,好不容易见到了天使投资人,如何去打动明星投资人?如何能拿到那一笔"救命"钱?看徐小平.雷军这样说. 1. 天使投资人偏爱投什么样的创业者? 雷军:你有强烈的渴望做成一件伟大的事情,并且能让投资者相信你能做得成这件事情.掏自己的钱创业是创业成功率最高的一种,因为在那一瞬间你重视了,你花的每一分钱都是自己的血汗钱和别人的血汗钱,不会轻松把别的投资人的钱打水漂. 曾李青:我们体系内投了好几家公司,发现我们投资成功的公司要么是有做大公司的成功经验,要么是名校毕业.好学校不一

width100%,设置padding或border溢出解决方法

.box { width: 100px; height: 100px; background: red;} .bd { width: 100%; padding: 10px; background: black;} <div class="box"><div class="bd"></div> </div> 如上结构,子元素将会溢出 解决方法:CSS3: 加入box-sizing:border-box;属性即可解决一般

(转) SQL Server中 ldf 文件过大的解决方法

原文地址:http://blog.itpub.net/35489/viewspace-616459/ 在SQL Server中经常遇到事务日志变大的情况,除了将数据库设置为“自动收缩”外,还可以使用下面的SQL命令进行快速清除数据库中的事务日志,命令如下:  - 第一步:清空日志  DUMP TRANSACTION   databasename   WITH   NO_LOG  -- 第二步:截断事务日志  BACKUP LOG   databasename   WITH   NO_LOG  -

C语言中常见的内存错误与解决方法

常见的错误 关于内存的一些知识已在内存分配中提及,现记录与分享常见的内存错误与对策. 类型 1:内存未分配成功,却使用了它. 方   法:在使用之前检查指针是否为NULL. 1)当指针p是函数的参数时,在函数入口处用语句assert(p!=NULL)进行断言检查. 2)当使用malloc或new来申请内存时,应该用if(p != NULL)进行防错检查. 类型 2:引用了尚未初始化的指针 原   因:内存的缺省初始值究竟是什么并没有统一的标准,在使用之前都进行初始化. 1)没有初始化的观念. 2