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 回答