使用 CSS 滑动按钮/菜单

Question

这里有六个300px宽度的容器中的按钮。如您所见，按钮在预期空间不足时跳入新行。我想知道是否有办法将按钮保持在一行中，但可以在移动设备上将它们向右滑动？框阴影表示右侧有更多按钮。

.wrap {
  width: 300px;
  box-shadow: 8px -5px 20px 0px lightgrey;
}
button {
  display: inline-block;
}

<div class="wrap">
  <button>Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
  <button>Button 4</button>
  <button>Button 5</button>
  <button>Button 6</button>
</div>

Answer 1

试试这个：

.wrap { 
     display: flex;
     overflow-x: scroll; 
}

Answer 2

这将部分地做你想要的，但你需要外部库来在移动设备上滑动（这个允许你检测触摸屏设备上的触摸事件）。

.wrap {
  display: flex;
  width: 300px;
  box-shadow: 8px -5px 20px 0px lightgrey;
  overflow-x: scroll;
}
button {
  margin-right: 4px;
  flex: 1 0 25%;
}
.wrap::-webkit-scrollbar {
    opacity: 0;
}
 
.wrap::-webkit-scrollbar-track {
    opacity: 0;
}
 
.wrap::-webkit-scrollbar-thumb {
  opacity: 0;
}

<div class="wrap">
  <button>Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
  <button>Button 4</button>
  <button>Button 5</button>
  <button>Button 6</button>
</div>