CSS - 宽度不符合span标记

我的某个跨度出现问题。请cosider以下样式：CSS - 宽度不符合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中它不会“崩溃”。

我收录了“明确的”类来看看这可以帮助，但无济于事。

任何想法？

来源

2009-07-21 chicane

嗯，什么你们说的非常有意义，但即使加上显示器后因故：阻止它仍然是“崩溃” 有趣，如果我添加边框列类，它会显示正确的宽度即使没有内容。但如果没有内容，没有边界，它只是崩溃 – chicane 2009-07-21 20:23:15

Ø是啊，还有一件事，怎么来的，如果不设置我的跨度达为块，如果有在其中的内容，然后将宽度设置正确像在风格片？（这并不是说IM辩论宽度是否荣幸为内联元素，我只是好奇，为什么他们的工作对我来说） – chicane 2009-07-21 20:29:33

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

的问题可能与空<span>标签这可能不是因为一些不起眼的规则我不记得的呈现。您应该尝试防止您的跨度为空，如果内容为空，则可以添加 。

来源

2009-07-21 20:29:40

为了使这项工作简单地添加

display: block;

的风格。

来源

2009-07-21 20:09:12

跨度是内嵌元素，并且因此不能设置的宽度。要设置一个宽度必须首先将其与

display:block;

设定为块元素之后，你可以设置宽度。由于跨度是土生土长的内联元素，你可以使用inline-block的也和它甚至会在IE浏览器：

display:inline-block;

来源

2009-07-21 20:09:15 richard

宽度不兑现，因为跨度是一个内联元素。为了解决这个问题，添加：

display: inline-block;

根据您的情况，display: inline-block可能比display: block更好，因为跨度后的任何内容不会被强迫到一个新的生产线。

来源

2009-07-21 20:09:59 jimyi

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

display: block; 
float: left;

来源

2014-07-14 11:34:18 Andrei

CSS - 宽度不符合span标记

回答

相关问题