list左右水平滑动 前端代码实现

实现 list 左右水平滑动的前端代码可以通过使用 CSS 属性 `overflow-x: scroll` 来实现。

下面是一个简单的例子：

HTML 代码：

<div class="list-container">
  <ul class="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
    <li>Item 10</li>
  </ul>
</div>

CSS 代码：

.list-container {
  width: 100%;
  overflow-x: scroll;
}

.list {
  display: flex;
  flex-wrap: nowrap;
  padding: 0;
  margin: 0;
  list-style: none;
}

.list li {
  flex: 0 0 auto;
  width: 200px;
  height: 200px;
  margin: 10px;
  background-color: #ccc;
  border-radius: 5px;
  text-align: center;
  font-size: 24px;
  line-height: 200px;
}

在这个例子中，我们使用 `flex` 布局来将 list 中的所有项放在一行中。然后我们设置了 `overflow-x: scroll` 属性，这使得 list 容器可以水平滚动。

我们还设置了每个 list 块的固定宽度和高度，并将它们设置为 `flex: 0 0 auto`，这样它们就不会自动换行。

最后，我们对 list 的样式进行了简单的设置，以便能够更好地显示每个项。

这样，我们就可以实现 list 左右水平滑动的效果。