Question

我有一个宽度为100％的水平导航栏。一旦导航达到一定程度最小宽度 - 大约800px，我说， - 我想要一个水平滚动条出现。 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

我将一个最小宽度的div作为所有导航栏内容的父级放入导航栏。然后导航栏本身应该有overflow-x：auto和overflow-y：hidden或overflow：auto。滚动条需要额外的垂直空间，因此也可能需要垂直滚动条。

Answer 3

这会使一个包含静态宽度的框包含您的内容。如果没有足够的空间容纳盒子（窗口小于400px），则会出现滚动条 http://jsfiddle.net/Re4AP/5/

这会使一个默认为100％宽度的框，最小宽度为400px以包含您的内容。如果没有足够的空间容纳框中的内容，则会将内容（本例中的文本）分成多行。如果窗口小于400px（最小宽度），则会出现滚动条 http://jsfiddle.net/Re4AP/7/

HTML-一旦达到特定宽度，创建水平滚动条

3 个答案: