0

我在让 nav 元素真正表现得像块元素时遇到了一些麻烦。我尝试使用 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;
}

编辑：

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

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

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

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

如果我取消浮动 a 标签，它们对齐正确，但我会丢失 a 标签顶部和底部的填充。如果我添加 display:block 来纠正所有标签堆叠在彼此之上。如果尝试使用浮动来纠正它：将显示留在内联。

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

有没有办法堆叠 nav 元素并浮动 a 元素并仍然保留 a 元素的填充？

4

2 回答 2

0

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

通过使用INLINE-BLOCK技术：

通过使用inline-block如果您设置font-size:0px;（nav具有元素的主容器inline-block），那么您将不会获得由以下原因引起的额外间距inline-block

看演示

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

看演示

通过使用FLOAT技术：

您需要添加overflow:hidden和 awidth以防止您的nav元素浮动。

请参阅下面的 CSS 中的更改：

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

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

看演示

于 2012-08-02T09:25:58.400 回答
0

这是我为实现这一目标所做的

nav a{
    display: block;
}
于 2019-12-07T02:43:56.800 回答