32

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

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

我加入了一个“清晰”的课程，看看这是否有帮助，但无济于事。

有任何想法吗？

4

5 回答 5

69

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

display:block;

之后，您可以设置宽度。因为 span 是一个原生的内联元素，你也可以使用 inline-block，它甚至可以在 IE 中工作：

display:inline-block;
于 2009-07-21T20:09:15.383 回答
32

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

display: inline-block;

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

于 2009-07-21T20:09:59.093 回答
16

display: block 在这里对你没有帮助，因为当浮动被激活时，元素会自动切换到块模式，无论它的初始模式是什么，所以你的宽度应该可以工作。

问题可能出在空<span>标签上，由于一些我不记得的晦涩规则，它可能无法呈现。您应该尝试防止跨度为空，&nbsp;如果内容为空，则可以添加 a 。

于 2009-07-21T20:29:40.023 回答
3

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

display: block;

到风格。

于 2009-07-21T20:09:12.560 回答
2

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

display: block;
float: left;
于 2014-07-14T11:34:18.003 回答