Question

我在使nav元素真正表现得像块元素时遇到了一些麻烦。我尝试用nav和标签制作菜单，而不是通常的ul和li标签。这没有按计划进行。我的菜单显示在彼此之后，好像显示：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;
}

编辑：

这就是我想要设置它的方式，但我更喜欢浮动a元素，所以我没有得到内联块的间距问题。

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

我仍然不明白为什么浮动a标签会使nav元素阻塞时所有标签都显示为内联？

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

如果我释放了一个标签，它们对齐正确，但我丢失了标签顶部和底部的填充。如果我添加display：block来纠正所有标签堆叠在彼此之上。如果尝试用浮点数来纠正它：将内联显示为内联。

a标签上的内联块似乎可以修复它，但后来我得到了间距问题。

有没有办法堆叠导航元素并浮动元素并仍然保留填充元素？

Answer 1

已编辑： * （在通过OP添加更多详细信息后） *

使用INLINE-BLOCK技巧

如果您在inline-block（主要容器中包含font-size:0px;元素）中设置nav，则使用inline-block，那么您将无法获得由{{1}引起的额外间距}

SEE DEMO

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

SEE DEMO

使用nav技巧

您需要添加FLOAT和overflow:hidden以防止width元素浮动。

请参阅以下CSS中的更改：

nav

SEE DEMO

Answer 2

这就是我要做的

nav a{
    display: block;
}

显示：块不堆叠导航元素

2 个答案: