浮動：左移除包括div？

這是我的CSS和HTML

#content { 
    -moz-border-radius:10px; 
    background:#F0F0F0; 
    width: 910px; 
    margin: 0 auto; 
    clear: both; 
} 

#content ul { 
list-style: none; 
padding: 0; 
margin: 0; 
} 

<div id="content"> 
    <ul> 
    <li>Foo</li> 
    <li>Bar</li> 
    <li>Baz</li> 
    </ul> 
</div>

我獲得含垂直排列的項目一個灰色的框。我想水平對齊它們，並且我讀了我必須將float: left放在#content ul選擇器中。如果我這樣做，灰色的格子框消失，並且三個li條目保持垂直。如果我將float：left放置到#content ul li選擇器，則條目現在是水平的，但封閉框仍然消失。

我錯過了什麼？

來源

2009-11-13 Stefano Borini

與您的其他CSS一起添加到UL的高度。

#content ul 
{ 
    height: 20px; 
} 

#content ul li 
{ 
    float: left; 
}

或者您可以使用下面的沒有高度的UL

#content ul li 
{ 
    display: inline; 
}

或者你可以把一個元素清除UL以下。

CSS：

.clear 
{ 
    clear: both; 
    height: 1px; 
}

HTML：

<ul> 
    <li></li> 
    <li></li> 
</ul> 
<div class="clear"></div>

OR（好措施），您可以高度增加了包裝的div

CSS：

.wrappingDiv 
{ 
    height: 20px; 
}

說明：浮動元件是在正常的內容流之外。因此包裝元素不能「知道」浮動元素的高度。

來源

2009-11-13 02:35:39 a432511

它的工作原理，謝謝。但爲什麼你需要指定高度？它不能從內容大小中確定它嗎？ – 2009-11-13 02:37:42

浮動元素位於文檔流的外部，並且包裝div不知道浮動元素的高度。如果在強制包含的div具有合適的高度後清除。有幾種方法可以解決問題。另一個是包裝div的高度。他們都工作！希望能幫到你 – a432511 2009-11-13 02:43:09

哦......現在我明白了......謝謝！ – 2009-11-13 03:06:07

float ed元素實際上並不強迫容器元素向下擴展以容納它們（它們將向下浮動超過容器的底部）。你需要做的是在clear:both的列表後面添加一個元素作爲其樣式的一部分，以強制其位於浮點下方，從而強制容器的邊界在浮點下方展開。（或者，您可以爲容器元素設置一個固定高度。）

來源

2009-11-13 02:35:55 Amber

浮動：左移除包括div？

回答

相關問題