html - html/css：水平列表中的空白/折叠容器

Question

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

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

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>容器崩溃了，我失去了菜单的白色背景，这使得整个事情变得不可读。

如何使容器未折叠？

score 0 · Accepted Answer

这是工作的jsfiddle

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

您需要将 to 的溢出设置ul为auto或hidden

score 0 · Accepted Answer

对于您的第一个示例，元素之间的空白实际上是由 HTML 中的空白引起的 - 您的和标记li之间的换行符。如果您删除它，空白将消失。</li><li>

或者，对于您的第二个示例，您可以拉伸父元素以“清除”浮动元素。有几种方法可以做到这一点（谷歌'clearfix'有几个例子），但最简单的方法是overflow: hidden在父元素上使用。

score 0 · Accepted Answer

<div>只要让你的隐藏“溢出” 。

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

score 0 · Accepted Answer

您可以使用伪元素在<ul>没有额外标记的情况下进行清除修复

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

4 回答 4