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;
}

这三个跨度在我的代码中:

<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是本机内联元素,因此您也可以使用内联块,它甚至可以在IE中使用:

display:inline-block;

Answer 2

宽度不受尊重,因为span是内联元素.要解决此问题,请添加:

display: inline-block;

根据您的情况,display: inline-block可能比display: block跨度之后的任何内容都不会强制到新行.

Answer 3

display: block 这里没有帮助,因为当激活浮动时,元素会自动切换到块模式,无论其初始模式如何,因此您的宽度应该有效.

问题可能在于空<span>标记,由于我记不起的一些模糊规则,可能无法呈现空标记.您应该尝试防止您的跨度为空,可以通过添加 内容为空的内容.