CSS - span标签上的宽度未被识别

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

我的代码中有这三个：

<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”中没有数据可显示时（甚至可能是任何一个，尽管我不确定），问题就会发生。在没有数据时，该“span”会“折叠”，并且其宽度不被考虑。这种情况发生在Firefox中，在IE中它不会“折叠”。

我添加了一个“clear”类来查看是否有所帮助，但没有用。

有什么想法吗？

- chicane

---

嗯，你们说的很有道理，但是即使添加了display:block，它仍然会“折叠”。有趣的是，如果我给列类添加边框，即使没有内容，它也会显示正确的宽度。但是如果没有内容，也没有边框，它就会折叠。 - chicane

哦对了，还有一件事，如果我的span没有被设置为块级元素，并且其中有内容，那么宽度就会像在样式表中正确地设置一样吗？（我并不是在争论内联元素是否遵守宽度，只是好奇为什么它们对我起作用了） - chicane

Answer 1

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

display:block;

之后你可以设置宽度。由于是原生的行内元素，你也可以使用inline-block，在IE中也可以正常工作：

display:inline-block;

- richard

Answer 2

Your content here

display: inline-block;

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

- jimyi

Answer 3

display: block 对于此处无济于事，因为当激活浮动时，元素会自动切换到块级模式，无论其最初的模式如何，所以您的宽度应该有效。

问题可能出现在空的 <span> 标签上，由于一些我无法记住的晦涩规则，它可能不会被渲染。您可以尝试防止 span 标签为空，例如如果内容为空，则添加  。

- Vincent Robert

---

好的，浮动元素自动变成块元素可以解释我在页面上看到的行为...我尝试了非断空格的技巧，它很有效，谢谢...如果有人知道为什么没有内容会导致这种折叠现象，也许他们可以发表意见来澄清这种奇怪的行为，但现在这是一个很好的解决方法。 - chicane

Answer 4

为了使这个生效，只需添加以下内容：

display: block;

应用样式。

- Keith Adler

Answer 5

使用 block 属性并可选择浮动 left 对我非常有帮助。

display: block;
float: left;

- Andrei