您的位置:首页 > HTML入门 > 【 返回上一页

span宽度无效_span设置width没有效果的解决

span标签设置宽度width无效解决篇-span宽度无效解决

div css网页布局时,对div设置宽度能正常显示排版出宽度效果,但对span设置宽度width却是无效的,无论对span设置多少width宽度值均无效,这里thinkcss为大家介绍几种让css设置span宽度生效成功。

span宽度无效的

一、无效原因

span无论设置宽度还是高度height均不能生效,是因为span没有自带块属性,而div自带有块元素,通俗理解,就像span没有自带骨架,而div自带骨架,所以看到div独占一行,设置宽度高度也会生效,而span设置宽度高度也无用没有任何效果。

二、CSS解决思路

1、span设置float 设置浮动后对span设置宽度 高度会起作用
2、span设置display:block span形成块自然设置宽会起作用
3、span设置display:inline-block 形成在一排的块,设置宽度也会生效

如何选择实现span宽度生效?
1、靠左靠右布局时候,使用对span设置float
2、设置宽度span单独一行时,选用display:block
3、文字混排时,对一段文字中其中一些文字设置宽度时候选用display:inline-block

三、让span宽度生效div css实例

1、完整html css代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>span无效变生效实例 www.thinkcss.com</title>
<style>
.box{ padding:10px; border:#F0F 2px solid; width:400px; height:80px}
.span-a{ float:left; width:100px; border:1px solid #F00}
.span-d{ float:right; width:100px; border:1px solid #F00}
.span-b{ display:block; width:100px; border:1px solid #00F}
.span-c{ display:inline-block; width:100px; border:1px solid #090}
</style>
</head>
<body>
<p class="box">
<span class="span-a">float靠左设置100px宽度</span>
<span class="span-d">float span作为布局设置宽度</span>
</p>
<p class="box">span宽度<span class="span-b">使用display:block</span>独占一行</p>
<p class="box">span宽度<span class="span-c">实现</span>宽度</p>
</body>
</html>

分别使用float、display:block、display:inline-block解决span宽度失效问题。

2、效果截图

span成功设置宽度三种效果截图
span成功设置宽度三种效果截图

四、总结

使用float浮动让span宽度,通常用于把span当作div一样布局框架来使用;在独占一行布局情况下可以对span设置css display:block实现;如果在文字内容中,要让其中一些文字使用span并设置宽度,可以使用display:inline-block实现。以上是三种情况下对span设置宽度无效对应解决方法,根据需求选择实用正确的CSS布局方法。

相关标签: 宽度 span
如需转载,请注明文章出处和来源网址:https://www.thinkcss.com/html/1386.shtml

日期:2017-08-06 17:54 css学习与资料网 Thinkcss原创