关于span不能设置宽度及span自动换行的解决方法
2012-06-28 17:22
218 查看
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 宽度的完美解决方案 (不自动换行)
<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> |
相关文章推荐
- 关于span不能设置宽度及span自动换行的解决方法
- 关于span不能设置宽度及span自动换行的解决方法
- p标签下输入数字不能自动换行的解决方法
- 关于在设置启动文件夹或者设置用户选项时不能得到当前用户的解决方法
- span无法设置宽度的问题的解决方法
- android关于AlertDialog.Builder中setMessage不能换行问题的解决方法
- Android Studio 中关于不能自动创建keystore的解决方法
- 关于label和span设置width无效问题解决方法
- css中实现字符超出宽度自动换行和英语字符不断行的解决方法
- 关于LR录制时不能自动启动IE浏览器的解决方法总结
- 关于启明星系统移除apppath配置,让系统自动获取路径来设置cookie的解决方法
- excel表中多位位数字设置成文本后不能自动填充问题的解决方法
- 关于TortoiseGit设置代理服务器会自动取消的问题解决方法
- css中实现字符超出宽度自动换行和英语字符不断行的解决方法
- 关于自定义AlertDialog,设置不能充满全屏的解决方法
- 关于自定义AlertDialog,设置不能充满全屏的解决方法
- 关于label和span设置width无效问题解决方法
- 关于在设置启动文件夹或者设置用户选项时不能得到当前用户的解决方法
- 关于在设置启动文件夹或者设置用户选项时不能得到当前用户的解决方法
- 自定义viewgroup实现自动换行的布局,同时解决自定义布局在wrapcontent下高度不能自适应的问题,plus一些关于Component重写的基础知识