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

display:inline-block;

Answer 2

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

display: inline-block;

根据您的具体情况，display: inline-block可能优于display: block，因为跨度后的任何内容都不会被强制转换为新行。

Answer 3

display: block 不会帮助您，因为当激活浮动时，元素会自动切换到阻止模式，无论其初始模式如何，因此您的宽度应该有效。

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

Answer 4

要完成这项工作，只需添加

即可

display: block;

对风格。

Answer 5

显示block并可选择浮动left帮助了我。

display: block;
float: left;

CSS - span标签上的宽度不受尊重

5 个答案: