Question

目前正确查看导航栏时没有任何问题。但是，我是我的OCD人，我想确保我有不正确的，或异常的观看也解决了。

现在，我的导航栏包含一条水平线，其中链接以|分隔和一些CSS翻转突出显示。在我看来，简单的设置可以很好地完成工作。但是，如果我放大，最终我将达到最后一个链接将没有更多空间的阶段，并转到下一行。显然不好看。我尝试将最大宽度：100％放在上面，但它没有什么区别。

相关代码如下：

<div class="navbarwrapper">
    <div class="navbar">
        | <a href="" class="navbar"></a> |
        <a href="" class="navbar"></a> |
        <a href="" class="navbar"></a> |
        <a href="" class="navbar"></a> |
        <a href="" class="navbar"></a> |
        <a href="" class="navbar"></a> |
        <a href="" class="navbar"></a> |
    </div>
</div>

.navbarwrapper {
    margin-bottom: 10px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    min-width: 800px;
}
.navbar {
    padding: 10px;
}

就像我说的，它在正常情况下工作正常，但是如果你放大（或者我的假设分辨率很低），最后一个链接会流到第二行。

Answer 1

锚标记是内联元素。这是他们在空间不足时应该做的事情。如果您希望它们的行为不同，则需要为所需行为设置包装元素的overflow。

Answer 2

尝试在菜单中使用<li> DEMO

Answer 3

溢出：隐藏;在必须具有固定宽度的父div上;）

让水平导航栏保持在一条线上

3 个答案: