jquery - 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

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

<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>