html - 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. 添加 float :无；到.menu

3. 添加显示:内联； .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;
   
   }