即使沒有任何東西，也能保持範圍的寬度

如果它是空的，是否有可能以某種方式保持範圍的寬度？即使沒有任何東西，也能保持範圍的寬度

我有以下的HTML僞表：

<p><span class="col1">Day:</span><span class="col2"><?php echo somephp ?></span></p> 
<p><span class="col1">Time:</span><span class="col2"><?php echo somephp ?></span></p> 
<p><span class="col1">Class:</span><span class="col2"><?php echo somephp ?></span></p> 
<p><span class="col1">Teacher:</span><span class="col2"><?php echo somephp ?></span></p>

使用CSS：

span.col1 {width: 100px;float: left;} 
span.col2 {width: 100px;}

有時PHP是在COL2呼應是空的，當這一切發生COL2的寬度是0和COL1上下面的段落結束了上面段落中col1旁邊的堆疊。

來源

2012-11-04 user1444027

可能的重複：http://stackoverflow.com/questions/4171286/how-to-make-a-div-with-no-content-have-a-width –

您的col2跨度忽略寬度，因爲它們是內聯元素。你需要使它們成爲內嵌塊元素。

span.col2 { width: 100px; display: inline-block }

也請記住，你可以需要的高度依賴於它的顯示在那裏添加到它，否則你會用一個跨度100像素結束了，但廣高0像素。

來源

2012-11-04 23:06:56 animuson

默認情況下，span元素是一個內聯元素，它會忽略寬度。

嘗試添加顯示：塊到你的跨度。

span.col1 {width: 100px;float: left; display:block;} 
span.col2 {width: 100px; display:block;}

希望它有幫助。

來源

2012-11-04 23:06:40

'display：block;'增加一個換行符。 – prageeth

這是正確的，但問題是如何使跨度保持寬度與空內容。我建議使用塊，因爲舊版瀏覽器IE8-不能與內聯塊一起使用。 –

如果默認情況下該元素顯示爲塊，則舊版本的瀏覽器通常不支持內聯塊。然而，如果該元素本地內聯，例如'span'那麼它會正常工作。 – Andy

默認情況下span顯示爲內聯。

因此，要麼加display:block給它一個塊元素或另外你可以使用display:inline-block保持它與文本的其餘部分內聯（不使用float）。

來源

2012-11-04 23:08:02 Andy

即使沒有任何東西，也能保持範圍的寬度

回答

相關問題