CSS - 水平滚动菜单不滚动

debugcn 发表于 Dev

苹果营业额

我正在尝试为移动设备创建一个水平滚动菜单。我从这篇文章中得到了建议，指出这可以用white-space: nowrap;和来完成overflow-x: auto;。

我试图实现的结果：内容应该得到一个水平滚动条，以便用户可以在菜单中滑动。菜单本身应该像这样离开屏幕：

这是我的代码的样子：

body {
     margin: 0;
     width: 500px; /* for this example */
}

.menubar {
     background:#000;
     height: 50px;
}

.logo {
     float:left;
     width: 25%;
     color:#fff;
     text-align: center;
}

.flat {
     margin:0;
     padding: 0;
     list-style: none;
}

.menu {
     width: 70%;
     float: right;
     white-space: nowrap;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
     -ms-overflow-style: -ms-autohiding-scrollbar;
}

.menu::-webkit-scrollbar {
     display: none;
}

.menu li {
     float: left;
     margin-right: 1em;
}

<div class="menubar">
      <div class="logo">My Logo</div>
      <div class="menu">
            <ul class="flat menu">
                  <li><a href="">Menu item</a></li>
                  <li><a href="">Menu item</a></li>
                  <li><a href="">Menu item</a></li>
                  <li><a href="">Menu item</a></li>
            </ul>
      </div>
</div>

有谁知道为什么它不起作用？

斯里坎斯 MK

从 .menu 类中删除宽度。
添加浮动：无；到.menu

添加显示：内联；到.menu li

body {
     margin: 0;
     width: 500px; /* for this example */
}

.menubar {
     background:#000;
     height: 60px;
}

.logo {
     float:left;
     width: 25%;
     color:#fff;
     text-align: center;
}

.flat {
     margin:0;
     padding: 0;
     list-style: none;
}

.menu {
     float: none;
     white-space: nowrap;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
     -ms-overflow-style: -ms-autohiding-scrollbar;
}

.menu::-webkit-scrollbar {
     display: none;
}

.menu li {
     margin-right: 1em;
  display:inline;

}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。