html如何对span设置宽度_html5教程技巧

来源:脚本之家  责任编辑:小易  

最近制作网站时发现给span设置宽度会无效,通过查阅CSS2标准中关于width 的定义发现,原来CSS中的 width 属性并不总是有效的,如果对象是 inline 对象,width 属性就会被忽略,Firefox 和 IE 是遵循CSS标准,因而直接设置span宽度会无效。在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;} 下面代码的 CSS定义完美解决了span的宽度设置问题。由于浏览器通常对不支持的CSS属性采取忽略处理的态度,所以最好将 display:inline-block行写在后面,这样在Firefox里面,如果到了未来的Firefox 3,这一行就能起作用,代码可以同时兼容各种版本。例:span { background-color:#ffcc00;display:-moz-inline-box;display:inline-block;width:150px;} 当新建HTML时加上了!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.zgxue.com防采集请勿采集本网。

这是一期分享 HTMLspan 标签,如何设置宽度的问题。

;height:200;background-color:#006699;margin:0 auto> 加margin:0 auto 就行了 span style=\"width:100px;height:30px;background:#ccc;display:block\">fffff</span> display:block转化为块级

span标签

转化为行内样式 用display:block;在样式里加上这个在写宽高就可以了哦 希望我的回答可以帮到您哦

span 表示行内元素,相当于 inline 属性,只会根据元素的宽度自行展开,自己设置宽度,不起作用。

一、形如ABCDEF格式行设置SPAN为固定宽度的方法如下:span {width:60px;text-align:center;如果对span使用float属性,总是导致span换到下一行。可以采用下面方法实现同行且居右对齐。

那如果我特别希望将 span 元素设置为宽度且不设置元素呢?下面通过几个方式去实现。

在span的CSS中增加display属性,将span设置为block类型的Element,这样宽度的确有效了,但把前后文字隔在不同行里面,这样其实span就完全变成了div。例:span { background-color:#ffcc00;

方式一

设置 span 属性为 span{display:block}; ,呈现的效果如下:

其实这个问题很简单—先要认清span的属性,因为span属于内联元素,而内联元素是忽略宽度和高度的,明白了这一点解决就很简单了,解决的办法就是利用css将span变为盒装元素即可。将内联元素定义为

但是这样写就体现不了 span 这个标签的作用了,跟 div 功效一致,都表示块级元素。

推荐指数::star2:

方式二

使用 float 属性,设置属性为 span{float:left} ,呈现的效果如下:

由于 float 会让这块内容脱离标准文档流,所以要设置宽度,这恰好与我的需求吻合。但是记得最后清除缓存。

由于写的代码量较多,推荐指数::star2::star2::star2::star2:

提示:不了解 float 属性的同学,请自行百度

方式三

使用 display:inline-block 的方式,呈现效果同方式二。

display 常用的有3个属性, inline 为行内元素,与 span 类似。 block 为块级元素,与 div 类似。 inline-block 结合这两者,可以自己设置宽度,且不独占一行。

代码量少,推荐指数::star2::star2::star2::star2::star2:

标签属于行内元素(inline),所以无法设置高度和宽度;如果需要改变其宽高,就需要将其转变为块体元素(block)或行内块体元素(inle-block):span{display:inlie-block;}实例演示:下面给出了两种样式,class1设置span 的宽高,class2改变span为行内块体元素,然后给其中一个span添加class1样式,另一个同时添加class1和class2样式,观察效果创建Html元素示例文字</span><br>示例文字设置css样式class1{width:200px;height:30px;line-height:30px;padding:10px;margin:20px;border:1px solid green;}class2{display:inline-block;}观察效果:第一个span因为默认为行内元素,所以宽度和高度的设置不起作用;第二个span已经改为inline-block方式,所以可以设置宽度和高度内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • 在firefox或ie中span无法确定宽度的解决方案
  • 设置span宽度高度的方法
  • css中将span标签设置为固定宽度的方法
  • span无法设置宽度的问题的解决方法
  • 设置span 宽度的完美解决方案
  • 兼容ie和ff的单行溢出文本显示省略号-css教程-网页制作-网页教学网
  • 为什么在html页面设置的高度和宽度没有效果呢
  • 如何设置span宽度
  • html中,span标记内的对象可以设置其宽度么?请各位大哥帮忙解答一下疑惑,谢谢
  • CSS中如何把Span标签设置为固定宽度
  • DIV定位以及SPAN设置宽度问题
  • 如何设置HTML span,label 的宽度
  • CSS中如何把Span标签设置为固定宽度
  • 如何设置span宽度
  • 如何给span设置高度宽度
  • html css布局问题还是js运动框架问题?点击让li宽度变大,并让span跑到紧贴div左侧
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作html5宽度span在firefox或ie中span无法确定宽度的解决方案设置span宽度高度的方法css中将span标签设置为固定宽度的方法span无法设置宽度的问题的解决方法设置span 宽度的完美解决方案兼容ie和ff的单行溢出文本显示省略号-css教程-网页制作-网页教学网html/xhtmlhtml5cssxml/xsltdreamweaver教程frontpage教程心得技巧css 如何让背景图片拉伸填充避免重复显示html5 input placeholder 颜色修改示例基于第一个phonegap(cordova)的应用详解 html5配合css3实现带提示文字的输入框(摆脱js)html5定位获取当前位置并在百度地图上显示将html5 canvas的内容保存为图片借助todataurl实现html5中如何显示视频呢 html5视频播放demo让ie支持html5的方法微信浏览器取消缓存的方法html5的存储方式sessionstorage和localstorage详解基于html5+tracking.js实现刷脸支付功能html中meta标签及keywords详解移动端h5页面根据屏幕适配的四种方案html5移动端自适应布局的实现html里显示pdf、word、xls、ppt的方法示例html5 直播疯狂点赞动画实现代码 附源码html5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷canvas 基础之图像处理的使用用canvas显示验证码的实现html5给汉字加拼音收起展开组件的实现代码
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved