CSS 实现多个按钮横向滚动，点击自动滑至中间

要实现多个 span 按钮的横向滚动，并在点击按钮时自动左滑或右滑，使被点击的按钮靠近中间，可以使用 CSS 中的'overflow-x'属性结合 JavaScript 来实现。

首先，需要将多个按钮包裹在一个容器内，设置容器的宽度和高度，并且设置'overflow-x: scroll;'来实现横向滚动。容器可以是一个'div'元素。

然后，给每个按钮添加一个点击事件的监听器。当按钮被点击时，获取被点击按钮的位置，并计算出滚动的距离。然后使用 JavaScript 的'scrollLeft'属性来设置容器的滚动位置，使被点击的按钮靠近中间。

下面是一个简单的示例代码：

HTML 代码：

<div class='container'>
  <span class='button'>按钮1</span>
  <span class='button'>按钮2</span>
  <span class='button'>按钮3</span>
  <span class='button'>按钮4</span>
  <span class='button'>按钮5</span>
</div>

CSS 代码：

.container {
  width: 400px;
  height: 50px;
  overflow-x: scroll;
  white-space: nowrap;
}

.button {
  display: inline-block;
  padding: 10px;
  margin: 5px;
  background-color: gray;
  color: white;
  cursor: pointer;
}

JavaScript 代码：

var buttons = document.querySelectorAll('.button');

buttons.forEach(function(button) {
  button.addEventListener('click', function() {
    var container = document.querySelector('.container');
    var scrollDistance = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2;
    container.scrollLeft = scrollDistance;
  });
});

在上面的示例中，容器的宽度设置为 400px，按钮的宽度和间距可以根据实际需求进行调整。通过点击按钮，容器会自动滚动，使被点击的按钮靠近中间。