Question

在我的新网站上，我真的专注于使用液体布局。但是，我似乎无法正确使用导航栏。目前，我使用的是使用浮动列表构建的水平导航栏。我左边有几个按钮，右边有几个按钮。现在我的问题是，一旦窗口宽度变得太小，一些按钮会跳转到文档中的下一行。我想避免的东西，或者至少让它看起来不错。有什么想法吗？

Answer 1

如果没有看到示例，我会说你应该开始使用媒体查询。找到菜单中断的浏览器宽度，然后将其添加到CSS：

@media all and (max-width: ???px) {
    #yournavbar {
        /* some styles here that change your navbar /*

    }
}

这样，您不必设置导航栏的样式，使始终以相同的方式工作，但仍然看起来不错，但您只需更改某个阈值下方（或上方）的样式根据情况，它开始表现不同。

Answer 2

导航栏中的li元素是固定宽度的吗？如果是，它们周围的包装需要有一个固定的宽度，等于添加的withs和margin，这将防止浮动下降。

另一种选择是在整个布局上使用min-width来强制滚动条，这也可以防止浮动掉落。