CSS实现span按钮横向排列并添加滚动条

要让span按钮横向排列，可以使用CSS的display属性和flexbox布局。

首先，给包含span按钮的父元素添加以下样式：

.parent-element {
  display: flex;
  overflow-x: auto; /* 设置横向滚动条 */
}

然后，给每个span按钮添加以下样式：

.span-button {
  flex: 0 0 auto; /* 设置按钮不可伸缩 */
  white-space: nowrap; /* 防止按钮换行 */
}

这样，span按钮就会横向排列，并且当按钮超出父元素的宽度时，会出现横向滚动条。

以下是一个完整的示例：

<div class="parent-element">
  <span class="span-button">按钮1</span>
  <span class="span-button">按钮2</span>
  <span class="span-button">按钮3</span>
  <span class="span-button">按钮4</span>
  <span class="span-button">按钮5</span>
  <span class="span-button">按钮6</span>
</div>

.parent-element {
  display: flex;
  overflow-x: auto; /* 设置横向滚动条 */
}

.span-button {
  flex: 0 0 auto; /* 设置按钮不可伸缩 */
  white-space: nowrap; /* 防止按钮换行 */
}

注意，父元素的宽度应该小于所有子元素的总宽度，这样才会出现横向滚动条。