CSS - span 标签不支持宽度

Question

我的其中一个跨度有问题。 请考虑以下样式：

.form_container .col1che
{
float: left; 
width: 4%; 
text-align: left;    
}

.form_container .col2che
{
float: left; 
width: 80%; 
text-align:left;
}

.form_container .col3che
{
float: right; 
width: 13%; 
text-align:right;
}

我的代码中的这 3 个跨度：

<div class="row"><!-- start: "row" -->
     <span class="col1che">        
          <?php  //some db feeds    ?>        
     </span>
     <span class="col2che">
          <?php  //some db feeds    ?>
     </span>
     <span class="col3che">
          <?php  //some db feeds    ?>
     </span>
     <div class="clear"></div>
</div><!-- end: "row" -->

当“COL1CHE”（或者甚至可能在其中任何一个，但我不确定）中没有数据显示时，当此跨度没有数据时，就会出现问题“崩溃”并且其宽度不受尊重。 这种情况发生在 Firefox 中，但在 IE 中它不会“崩溃”。

我加入了一个“清晰”的课程来看看这是否有帮助，但没有效果。

有任何想法吗？

Answer 1

Span 是一个内联元素，因此您无法设置宽度。 要设置宽度，必须首先将其设置为块元素，然后

display:block;

才能设置宽度。 由于span是一个原生的内联元素，你也可以使用inline-block，它甚至可以在IE中工作：

display:inline-block;

Answer 2

不支持宽度，因为 span 是内联元素。 要解决此问题，请添加：

display: inline-block;

根据您的情况，display: inline-block 可能比 display: block 更好，因为跨度之后的任何内容都不会被强制到新队。

Answer 3

display: block 不会在这里为您提供帮助，因为当激活浮动时，元素会自动切换到块模式，无论其初始模式如何，因此您的宽度应该起作用。

问题可能出在空的 标记上，由于我不记得一些模糊的规则，该标记可能无法呈现。 您应该尝试防止您的范围为空，如果内容为空，可以添加   。

Answer 4

要使这项工作正常进行，只需添加

display: block;

到样式即可。

Answer 5

显示 block 和可选的浮动 left 帮助了我。

display: block;
float: left;