使用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; 
}