css - 显示 :block does not stack nav element

Question

我在让 nav 元素真正表现得像 block 元素时遇到了一些麻烦。我尝试用 nav 和标签而不是通常的 ul 和 li 标签制作菜单。那没有按计划进行。我的菜单一个接一个地出现，就好像 display:block css 没有效果一样。我想让菜单堆叠起来，而不是依次显示。

HTML:

<nav id="mainmenu">
    <a href="#">Item1</a>
    <a href="#">Item2</a>
    <a href="#">Item3</a>
<nav>
<nav id="submenu">
    <a href="#">Item1</a>
    <a href="#">Item2</a>
    <a href="#">Item3</a>
<nav>

CSS:

nav{
    display: block;
}

编辑:

这是我希望的设置方式，但我更喜欢 float a 元素，这样我就不会遇到内联 block 的间距问题。

http://jsfiddle.net/Kpv5H/2/

我还是不明白为什么当 nav 元素被阻塞时， float a 标签会使所有 a 标签内联显示？

http://jsfiddle.net/Kpv5H/4/

如果我取消 float a 标签，它们对齐正确，但我丢失了 a 标签顶部和底部的填充。如果我添加 display:block 来更正所有标签堆叠在彼此之上的情况。如果尝试用 float:left 更正它，则显示内联。

a 标签上的行内 block 似乎修复了它，但后来我遇到了间距问题。

有没有办法堆叠 nav 元素并 float a 元素，同时仍然保留 a 元素的填充？

Answer 1

已编辑: *(通过 OP 添加更多详细信息后)*

通过使用 INLINE-BLOCK 技术:

通过使用 inline-block 如果你在 nav 中设置 font-size:0px; (主容器有 inline- block 元素)那么你将不会得到由 inline-block

引起的额外间距

SEE DEMO

如果不在 nav 中添加 font-size:0px;，它将如下所示:

SEE DEMO

通过使用 FLOAT 技术:

您需要添加 overflow:hidden 和 width 以防止您的 nav 元素 float 。

在下面查看您的 CSS 中的更改:

nav {
    display: block;
    overflow:hidden; /* Added */
    width: 100%; /* Added */
}

nav a {
    float: left;
    padding: 2em;
}​

SEE DEMO