您的位置:首页 > CSS技巧 >

 

css span宽度设置生效

 

css设置span宽度生效,让span设置宽度(width样式)生效布局技巧

span本身不是块(就像没有骨力一样)标签元素,不像div标签那样直接设置width宽度即可生效,而span直接设置宽度width样式不会生效起作用。

span成功设置宽度方法:

1、对span设置float
根据需求对span设置float浮动样式,再设置width宽度即可生效。缺点浮动实现宽度生效,却需要同级均需要使用float浮动样式,不然将出现同级浮动盒子和与不浮动盒子出现重叠遮挡现象。

span设置float实现宽度生效

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>float 实现span宽度</title>
<style>
span{float:left;width:300px; border:1px solid #F00}
</style>
</head>
<body>
<span>我形成块了 宽度设置300px</span>
span外的内容
</body>
</html>

span设置float实现成功设置宽度样式
css span设置float实现成功设置宽度样式 实例截图

2、对span 设置display:block
display:block让span形成块元素,变成像DIV一样默认块。缺点与DIV一样独占一行。

示例完整源代码(HTML+CSS实例代码):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>display:block 实现span宽度</title>
<style>
span{ display:block; width:300px}
</style>
</head>
<body>
<span>我形成块了 宽度设置300px</span>我要被换行显示
</body>
</html>

span宽度设置生效实例效果截图
span宽度设置生效实例效果截图

3、span宽度设置扩展到span高度灵活总结
本身默认情况下对span设置宽度、设置高度均是无效的,无法生效,通常情况下对span设置float浮动或display:block后,span设置宽度和高度才能正常实现,所以实际布局时根据需求来选择实现span宽度和高度方法。

标签(Tag): 宽度 高度 span宽度
本文分享URL地址:http://www.css5.com.cn/jiqiao/1220.html

更多

 

CSS必备基础教程 - TOP

 

热门信息

 

CSS5更新 - TOP

 

 

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解。
CSS教程文章修订日期::2017-01-13     点击:
原创:CSS5     来源网址:http://www.css5.com.cn/jiqiao/1220.html
本文www.css5.com.cn(DIV CSS) CSS5版权所有,欢迎转载,并注明出处来源及URL!