html - 导航栏和液体设计

Question

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

Answer 1

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

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

    }
}

这样，您不必设置导航栏的样式，使其始终以相同的方式工作并且仍然看起来不错，但是您可以更改低于（或高于）某个阈值的样式，以便它开始表现不同，基于情况。

Answer 2

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

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