javascript - 使用 CSS 滑动按钮/菜单

Question

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

.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>

标签： javascriptjqueryhtmlcss

Answer 1

尝试这个：

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