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

这部分地可以满足您的需求，但是您需要外部库才能在移动设备上滑动（this one可以检测触摸屏设备上的触摸事件）。

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

使用CSS滑动按钮/菜单

2 个答案: