li 分两行，当个数过多时，可进行左右滑动展示，怎么实现

这个需求可以通过 CSS 和 JavaScript 实现。具体步骤如下：

1. 首先需要确定容器的宽度，并设置 `overflow-x: scroll;` 让容器可以水平滚动。

2. 将 `li` 元素设置为 `display: inline-block;`，这样它们就可以在同一行内并且可以自动换行。

3. 设置一个 JavaScript 函数来计算 `li` 元素的总宽度，并将该宽度应用于容器。

4. 添加左右箭头按钮，当用户点击它们时，容器内的 `li` 元素将向左或向右移动。

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

HTML：

<div class="container">
  <ul class="list">
    <li>第一个</li>
    <li>第二个</li>
    <li>第三个</li>
    <li>第四个</li>
    <li>第五个</li>
    <li>第六个</li>
    <li>第七个</li>
    <li>第八个</li>
    <li>第九个</li>
    <li>第十个</li>
    <li>第十一个</li>
    <li>第十二个</li>
    <li>第十三个</li>
    <li>第十四个</li>
    <li>第十五个</li>
  </ul>
  <div class="prev"></div>
  <div class="next"></div>
</div>

CSS：

.container {
  width: 500px;
  overflow-x: scroll;
  white-space: nowrap;
  position: relative;
}

.list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.list li {
  display: inline-block;
  padding: 10px;
  margin-right: 5px;
  background-color: #ccc;
}

.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background-color: #333;
  color: #fff;
  text-align: center;
  cursor: pointer;
}

.prev {
  left: 0;
}

.next {
  right: 0;
}

JavaScript：

const list = document.querySelector('.list');
const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');

function setListWidth() {
  const liWidth = list.querySelector('li').offsetWidth;
  const liCount = list.querySelectorAll('li').length;
  const totalWidth = liWidth * liCount;
  list.style.width = `${totalWidth}px`;
}

setListWidth();

prevBtn.addEventListener('click', () => {
  list.scrollLeft -= 200;
});

nextBtn.addEventListener('click', () => {
  list.scrollLeft += 200;
});

在这个示例中，容器的宽度为 500px，当 `li` 元素的个数超过容器宽度时，用户可以通过滚动容器或点击左右箭头按钮来查看所有 `li` 元素。在 JavaScript 中，我们定义了 `setListWidth` 函数来计算 `li` 元素的总宽度，并将其应用于容器。左右箭头按钮的点击事件将容器内的 `li` 元素向左或向右移动 200px。