HTML——达到一定宽度后创建水平滚动条

Question

我有一个宽度为 100% 的水平导航栏。一旦导航达到一定 最小宽度——大约 800 像素，我说——我想要一个水平滚动条出现。 CSS 属性 min-width 不起作用，因为它不会创建滚动条。

This 的帖子提出了与我相同的问题，但该人得到的唯一好的答案是使用 jQuery 插件，我不确定如何使用它添加滚动条。

如何添加超过固定最小宽度的水平滚动条？请帮帮我。

谢谢。

编辑根据要求，这是我的代码：

HTML

<nav id="topBar">
    <section id="topBarRight">
        <!-- stuff !-->
    </section>
</nav>

CSS（没有您的任何建议）

#topBar
{
    position: fixed;
    top: 0px;
    left: 0px;

    width: 100%;
    height: 50px;
    min-width: 800px;
}

#topBarRight
{
    float: right;
}

Answer 1

本质上，您需要某种父元素来包含导航，充当一种“视口”：

<nav id="topBar">
  <section id="topBarRight">
    <ul id="navMenu">
      <li>Home</li>
      <li>About</li>
      <!-- ... -->
    </ul>
  </section>
</nav>

然后您可以限制父级的宽度并允许导航根据需要增长：

<style>
  #topBar {
    /* ... */
    width: 100%;
    overflow: auto;
  }

  #topBarRight {
    min-width: 800px;
    overflow-x: auto;
  }

  #navMenu {
    float: right;
    /* ... */
  }
</style>

Answer 2

我会将一个具有 min-width 的 div 作为所有导航栏内容的父级放入导航栏中。 导航栏本身应该有overflow-x:auto 和overflow-y:hidden，或者overflow:auto。 滚动条将需要额外的垂直空间，因此可能也需要垂直滚动条。

Answer 3

这会生成一个具有静态宽度的框来包含您的内容。当没有足够的空间容纳该框（窗口小于 400 像素）时，会出现一个滚动条。
http://jsfiddle.net/Re4AP/5/

这会生成一个默认为 100% 宽度且最小宽度为 400 像素的框来包含您的内容。当没有足够的空间来容纳框中的内容时，它会将内容（在这种情况下为文本）分成多行。如果窗口小于 400px（最小宽度），则会出现滚动条。
http://jsfiddle.net/Re4AP/7/