CSS-水平滚动菜单不滚动

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

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

3. 添加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;
   
   }