关于span不能设置宽度及span自动换行的解决方法

转载 2013年12月04日 17:59:11

默认span的宽度是自适应内容的。

 

 

span标记的样式设定width属性:

<html>
<body>
<span style="width:80%">新闻标题</span><span style="20%">2006-5-27</span>
</body>
</html>

 

加上<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">这一句,span的宽度失效,会发现不会产生效果。

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<span style="width:80%">新闻标题</span><span style="20%">2006-5-27</span>
</body>
</html>



如果设置display:block,width属性生效,但是此时的span跟div一样了。  DIV会自动换行

span不是块级的所以其宽度是依据内容的多少而定,你必需要设定span为BLOCK这样才可以设置宽度!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<span style="width:80%; display:block; float:left; ">新闻标题</span><span style="20%">2006-5-27</span>
</body>
</html>


如果设置display:inline-block,则span并列在同行,而且width属性生效。

元素display属性的常见值说明:

block:块对象的默认值。将对象强制作为块对象呈递,为对象之后添加新行。
inline:内联对象的默认值。将对象强制作为内联对象呈递,从对象中删除行。
inline-block:将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内。
non:隐藏对象。与 visibility 属性的hidden值不同,其不为被隐藏的对象保留其物理空间。

设置 span 宽度的完美解决方案 (不自动换行

下面代码的 CSS定义完美解决了span的宽度设置问题。代码可以同时兼容IE/FF各种版本。
<style type="text/css">
span { background-color:#ffcc00; display:-moz-inline-box; display:inline-block; width:150px;}
</style>
举报

相关文章推荐

解决bootstrap row span设置border换行的问题

Hadoop方面的毕业设计告一段落了,趁这几天空闲时间认真学习一下之前常使用但是却没用好的Bootstrap。 本文记录Bootstrap框架使用栅格系统时,遇到row内的span设置border换...

css中实现字符超出宽度自动换行和英语字符不断行的解决方法

css中实现字符超出宽度自动换行和英语字符不断行的解决方法 为了使英语字符不断开,我在显示内容的style是text-align:justify; text-justify:inter-id...

我是如何成为一名python大咖的?

人生苦短,都说必须python,那么我分享下我是如何从小白成为Python资深开发者的吧。2014年我大学刚毕业..

在IE6 下span标签换行问题解决--》 'white-space:nowrap' 仅作用在纯文本内容上

标准参考 根据 W3C CSS 2.1 规范中的描述 'white-space:nowrap' 设置的含义为:该值像 'normal' 那样合并空白,但是阻止文本内的分行。 详细说明请参考:16....

html中span标签中width属性无效的解决方法

原文地址 : http://hi.baidu.com/java_learning/item/0ad9083f179f145b81f1a7c8   先看下面代码: php自学网 输出:p...
  • lj2tj
  • lj2tj
  • 2012-07-07 23:33
  • 503

如何设置HTML span、label 的宽度

该文讲述如何设定 HTML span 宽度。 缺省情况 HTML span 的宽度设定无效 在 HTML 中如何设定 span 的宽度?这看上去是个很简单的问题,似乎用 style 中的 wi...

span无法确定宽度的解决方案

Test Span span { background-color:#ffcc00; width:150px ; } fixed width span 通过试验以后发...

span设置宽度有效无效问题

缺省情况下span的宽度设定无效 在html中如何设定span的宽度?这看上去是个很简单的问题,似乎用style中的width属性就可以。例如, YPE html PUBLIC "-//W3C//...

span设置固定宽度

标签是被用来组合文档中的行内元素。相信对一般的网页设计师来讲是非常熟悉的朋友了,使用相当频繁,但我们往往很少对SPAN设定样式,一般也没什么必要,大多数都留给DIV老朋友了。 在做"善良公社...

设置span的宽度

引自:http://blog.sina.com.cn/s/blog_70b0792b0100uqfl.html 在默认的情况下,利用css样式对span进行宽度设定是无效,但有时为了某种排版的要求...

span、a标签之间的换行空白问题

我们平时在写行内元素时,经常会不小心换行写个空格啥的,然后就会惊奇的发现浏览器中居然有空格。第一个span标签 第二个span标签效果是这样的: 无标题文档 s
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)