CSS - 跨度标签不支持宽度

Question

我的一个 span 有问题。请考虑以下样式:

.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 中它不会“崩溃”。

我加入了一个“clear”类来查看这是否有帮助，但无济于事。

有什么想法吗？

Answer 1

Span 是一个内联元素，因此您不能设置宽度。要设置宽度，您必须首先将其设置为带有

的 block 元素

display:block;

之后你可以设置宽度。由于 span 是原生内联元素，您也可以使用 inline-block，它甚至可以在 IE 中工作:

display:inline-block;