HTML/CSS : white spaces/collapsed container in horizontal list

Question

我正在尝试为我的网站创建一个水平菜单。这并不难，但我遇到了两个问题，这阻碍了我的设计。

我可以通过两种方式做到这一点:

1).通过设置

#menu li { 
display: inline-block;
}

就像我在这里所做的那样:http://jsfiddle.net/l0ner/HPpgG/ .

它可以工作并且看起来像我想要的，但每个元素之间有一个空白，这破坏了设计。我可以通过将所有列表元素放在一行中来删除空格，但这并不是一个优雅的解决方案。我知道我可以设置 <ul>字体大小为0，然后在<li>中恢复但对我来说，这太像是一个肮脏的 hack，我希望将 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的overflow设置为auto或hidden