我在让 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 的间距问题。
我还是不明白为什么当 nav 元素被阻塞时, float a 标签会使所有 a 标签内联显示?
如果我取消 float a 标签,它们对齐正确,但我丢失了 a 标签顶部和底部的填充。如果我添加 display:block 来更正所有标签堆叠在彼此之上的情况。如果尝试用 float:left 更正它,则显示内联。
a 标签上的行内 block 似乎修复了它,但后来我遇到了间距问题。
有没有办法堆叠 nav 元素并 float a 元素,同时仍然保留 a 元素的填充?
最佳答案
已编辑: *(通过 OP 添加更多详细信息后)*
通过使用 INLINE-BLOCK
技术:
通过使用 inline-block
如果你在 nav
中设置 font-size:0px;
(主容器有 inline- block
元素)那么你将不会得到由 inline-block
如果不在 nav
中添加 font-size:0px;
,它将如下所示:
通过使用 FLOAT
技术:
您需要添加 overflow:hidden
和 width
以防止您的 nav
元素 float 。
在下面查看您的 CSS 中的更改:
nav {
display: block;
overflow:hidden; /* Added */
width: 100%; /* Added */
}
nav a {
float: left;
padding: 2em;
}
关于css - 显示 :block does not stack nav element,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11774522/