html/css：空格/水平列表中的摺疊容器

Question

我正在嘗試爲我的webisite創建一個水平菜單。這並不困難，但我遇到了兩個問題，這使我的設計受到了制動。

我可以用兩種方法做到：

1）。通過設置

#menu li { 
display: inline-block; 
} 

像我這樣做：http://jsfiddle.net/l0ner/HPpgG/。

它的工作原理與我想要的一樣，但每個元素之間都有一個空白區域，這打破了設計。我可以通過將所有列表元素放在一行中來刪除空間，但這不完全是一個優雅的解決方案。 我知道我可以將<ul>字體大小設置爲0，然後在<li>中恢復它，但它對我來說太像是一種骯髒的黑客攻擊，我希望將css的「魔力」保持爲最小。

如何刪除這些空格？ 2）。通過設置

#menu li { 
display: block; 
float: left; 
} 

像我一樣在這裏：http://jsfiddle.net/l0ner/HPpgG/1/

但這樣的<div>容器崩塌，我失去了白色背景的菜單，這讓整個事情不可讀。

我如何使容器無法運作？

Answer 1

這裏是工作jsfiddle

#menu ul { 
    margin: 0; 
    padding: 0; 
    overflow:auto; 
} 
#menu li { 
    float: left; 
    list-style:none; 
} 

您需要設置ul到auto或hidden

Answer 2

的溢出爲了您的第一個例子，在li元素之間的空白字面上所致您的HTML中有空格 - 該行在您的</li>和<li>標記之間分隔。如果刪除這個，空白區域將消失。

或者，對於第二個示例，您可以拉伸父元素以「清除」浮動元素。有幾種方法可以做到這一點（谷歌'clearfix'的幾個例子），但最簡單的方法是在父元素上使用overflow: hidden。

Answer 3

只是讓你的隱藏的'溢出'<div>。

#menu { 
    background: #fff; 
    color: #000; 
    overflow:hidden; 
} 

Fiddled here

Answer 4

您可以使用僞元素做就<ul>一個clearfix無需額外的標記

jsFiddle

#menu ul:after { 
    clear:both; 
    content:""; 
    display:block; 
}