• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > 设置span 宽度的完美解决方案

设置span 宽度的完美解决方案

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含span,宽度等相关知识,佚名 希望在学习及工作中可以帮助到您
缺省情况下span的宽度设定无效
在html中如何设定span的宽度?这看上去是个很简单的问题,似乎用style中的width属性就可以。例如,

通过试验以后发现,无效,无论是在Firefox还是IE中都无效。

通过查阅CSS2标准中关于width的定义发现,原来CSS中的width属性并不总是有效的,如果对象是inline对象,width属性就会被忽略。Firefox和IE原来是遵循了标准才这样做的。
修改span为block类型并设置float不是完美解决
在span的CSS中增加display属性,将span设置为block类型的Element,这样宽度的确有效了,不过也把前后文字隔在不同行里面。这样其实span就完全变成了div。

能不能让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,这一行就能起作用,代码可以同时兼容各种版本。

您可能想查找下面的文章:

  • 深入理解DIV和SPAN的区别
  • CSS文本超出div或者span时用省略号代替
  • 浅谈Span和Div的区别
  • 利用CSS span实现双语菜单的方法教程
  • span设置text-indent不起作用的原因及解决方法
  • 浅析css html span 块状不换行问题
  • 设置span宽度高度的方法
  • div与span的区别和使用示例
  • CSS中将Span标签设置为固定宽度的方法
  • DIV和SPAN垂直居中对齐的实现方法

相关文章

  • 2017-08-06使用JS配合CSS实现Windows Phone中的磁贴效果
  • 2017-08-06ie,360下html锚点失效问题解决
  • 2017-08-0614款免费的RSS、CSS和HTML验证工具
  • 2017-08-06不同浏览器对CSS3和HTML5的支持状况
  • 2017-08-06纯CSS实现聊天框小尖角、气泡效果
  • 2017-08-06div+css实现圆角即网页上常用的圆角效果
  • 2017-08-06完美实现文字置于图片之上且背景半透明
  • 2017-08-06最新CSS hack技术(IE6/7/8)
  • 2017-08-06移动端网页解决CSS的active伪类无效的方法
  • 2017-08-06ie6下position:absolute不显示问题解决方法

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 用CSS3绘制三角形的简单方法
    • CSS3中的Opacity多浏览器透明度兼容性问题
    • 详解CSS3的perspective属性设置3D变换距离的方法
    • 浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
    • css弹出层代码分享
    • css文件不能被正常载入的问题解决方法
    • 对未知高度的图片设置垂直居中的方法详解
    • 纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦等)
    • 老生常谈position定位——让人又爱又恨的属性
    • 一个不错的html视频播放器兼容主流浏览器

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有