Question

我正在尝试为移动设备创建水平滚动菜单。我从this article那里获得了建议，并指出可以使用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>

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

Answer 1

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

添加display：inline;到.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;

}

CSS-水平滚动菜单不滚动

1 个答案: