如果按照上面所诉执行，那么页面就不是固定的了，要实现li可滑动，但是主页面不要偏移

要实现 `li` 可滑动，可以给 `li` 元素添加 `overflow: auto;` 样式，这样当 `li` 内容超出父容器高度时，就会出现滚动条，可以滑动查看内容。

如果想保持主页面不偏移，可以给主页面容器添加 `overflow: hidden;` 样式，这样当 `li` 滚动时，主页面不会发生偏移。同时，为了让 `li` 滚动时不超出主页面容器，可以给 `li` 设置最大高度，例如： `max-height: 300px;`。这样当 `li` 内容超出 300px 高度时，就会出现滚动条，保证了 `li` 的滑动和主页面的不偏移。

相关问题

li 数据太多，如何实现只换两行，然后可左右滑动查看数据，同时滑动时主页面不能发生偏移

你可以使用 CSS 的 overflow 属性来实现这个效果。具体来说，可以将 li 元素设置为固定高度，并将 overflow 属性设置为 auto 或 scroll，这样当 li 内容超出固定高度时就会出现滚动条，用户就可以滑动滚动条来查看其他内容。同时，你可以将 ul 元素的宽度设置为固定值，并将 overflow-x 属性设置为 auto 或 scroll，这样当 li 元素超出 ul 元素的宽度时就会出现横向滚动条，用户就可以左右滑动来查看其他内容。以下是一个示例代码：

HTML 代码：

<div class="wrapper">
  <ul class="list">
    <li>第一行内容</li>
    <li>第二行内容</li>
    <li>第三行内容</li>
    <li>第四行内容</li>
    <li>第五行内容</li>
    <li>第六行内容</li>
    <li>第七行内容</li>
    <li>第八行内容</li>
    <li>第九行内容</li>
    <li>第十行内容</li>
  </ul>
</div>

CSS 代码：

.wrapper {
  width: 300px; /* 设置 ul 元素的宽度 */
  overflow-x: auto; /* 设置为自动横向滚动 */
}
.list {
  height: 50px; /* 设置 li 元素的固定高度 */
  overflow: auto; /* 设置为自动纵向滚动 */
  white-space: nowrap; /* 防止 li 元素换行 */
}
.list li {
  display: inline-block; /* 将 li 元素设置为行内块元素 */
  width: 150px; /* 设置 li 元素的宽度 */
  margin-right: 10px; /* 设置 li 元素之间的间距 */
  line-height: 25px; /* 设置行高 */
}

在这个示例中，我们将 ul 元素的宽度设置为 300px，并将 overflow-x 属性设置为 auto，这样当 li 元素超出 ul 元素的宽度时就会出现横向滚动条。同时，我们将 li 元素的高度设置为 50px，并将 overflow 属性设置为 auto，这样当 li 内容超出 50px 时就会出现纵向滚动条。注意，我们将 li 元素设置为行内块元素，这样它们就可以在同一行显示。另外，如果你希望在滑动 li 内容时不影响主页面的滚动，可以给 .wrapper 元素设置一个固定高度，并将 overflow 属性设置为 auto，这样就只会在 .wrapper 元素内部出现滚动条，不会影响主页面的滚动。

li 数据太多，如何实现只换两行，然后可滑动查看别的li数据，同时滑动li时主页面不能发生偏移

你可以使用 CSS 的 overflow 属性来实现这个效果。具体来说，可以将 li 元素设置为固定高度，并将 overflow 属性设置为 auto，这样当 li 内容超出固定高度时就会出现滚动条，用户就可以滑动滚动条来查看其他内容。以下是一个示例代码：

HTML 代码：

<ul class="list">
  <li>第一行内容</li>
  <li>第二行内容</li>
  <li>第三行内容</li>
  <li>第四行内容</li>
  <li>第五行内容</li>
  <li>第六行内容</li>
  <li>第七行内容</li>
  <li>第八行内容</li>
  <li>第九行内容</li>
  <li>第十行内容</li>
</ul>

CSS 代码：

.list {
  max-height: 50px; /* 设置固定高度 */
  overflow: auto; /* 设置为自动滚动 */
}
.list li {
  line-height: 25px; /* 设置行高 */
}

在这个示例中，我们将 ul 元素的最大高度设置为 50px，并将 overflow 属性设置为 auto，这样当 li 内容超出 50px 时就会出现滚动条。同时，我们将 li 元素的行高设置为 25px，这样每个 li 元素只会显示两行内容。注意，如果你想让 li 元素的宽度和 ul 元素一样，需要将 li 元素的 display 属性设置为 block 或者 inline-block。

另外，如果你希望在滑动 li 内容时不影响主页面的滚动，可以给 ul 元素设置一个固定高度，并将 overflow 属性设置为 auto，这样就只会在 ul 元素内部出现滚动条，不会影响主页面的滚动。