Question

我有一个水平菜单，当浏览器窗口最大化时看起来很好但是当我缩小浏览器窗口或手机上的查看页面时，菜单项会换行到一个新行。我已经尝试过类似问题的所有在线示例，但没有成功。

HTML：

<div id="menu">
   <ul>
      <li><a href="index.html" accesskey="1" title="">Homepage</a></li>
      <li class="current_page_item"><a href="#" accesskey="2" title="">FAQ</a></li>
      <li><a href="AboutUs.html" accesskey="3" title="">About Us</a></li>
      <li><a href="Policies.html" accesskey="4" title="">Policies</a></li>
      <li><a href="ContactUs.html" accesskey="5" title="">Contact Us</a></li>
      <li><a href="Strategies.html" accesskey="6" title="">Strategies</a></li>
      <li><a href="Testimonials.html" accesskey="7" title="">Testimonials</a></li>
      <li><a href="Tutorial.html" accesskey="8" title="">Tutorial</a></li>
  </ul>
</div>

CSS：

#menu
{
    position: absolute;
    right: 0;
    top: 0;
    overflow-x:scroll;
}

#menu ul
{
    display: inline-block;
}

#menu li
{
    display: block;
    float: left;
    text-align: center;
}

#menu li a, #menu li span
{
    display: block;
    padding: 0em 1.5em;
    height: 150px;
    letter-spacing: 0.20em;
    line-height: 150px;
    text-decoration: none;
    font-size: 0.90em;
    font-weight: 600;
    text-transform: uppercase;
    outline: 0;
    color: #ACCFFF;
}

Answer 1

根据此previous question进行了以下更改：

#menu ul{white-space: nowrap;}
#menu li{display: inline-block;}

“浮动：离开;”关于“#menu li”没有必要。你的代码的另一个问题是#menu的绝对定位会阻止x滚动，所以如果你真的想要一个必须删除的滚动条。

有关工作示例，请参阅此jfiddle。

然而，似乎更为公认的做法是避免菜单上的丑陋滚动条，并使菜单可折叠为较小的屏幕。 W3 Schools有一个演示。

Answer 2

您需要为菜单包装器指定最小宽度，例如min-width: 1225px; 请参阅此jsfiddle。

当浏览器窗口缩小时，CSS水平菜单会自动换行

2 个答案: