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標記

回答

相關問題