css如何控制显示几个li

CSS是前端开发中常用的样式表语言，可以通过CSS控制网页模板的样式与布局。其中，控制列表元素li的数量是一项重要的任务。接下来，我们就一起看看如何使用CSS来控制显示几个li。

ul {
  display: flex;  // 设置ul为Flex布局
  flex-wrap: wrap;  // 超出容器的部分自动换行
  max-height: 120px;  // 设置最大高度为120px，超出部分自动隐藏
  overflow: hidden;  // 隐藏超出容器的部分
}

li {
  width: 100%;  // li的宽度为100%
}

以上代码中，我们将ul设置成Flex布局，并通过设置最大高度和超出隐藏来控制显示的li数量。同时，为了让每个li都占满整行，我们将li的宽度设置为100%。

值得注意的是，以上代码的效果是控制显示固定数量的li，如果需要根据屏幕尺寸自适应控制li数量，可以使用媒体查询来实现。

@media (max-width: 768px) {
  ul {
    max-height: 80px;  // 在屏幕尺寸小于768px时，设置最大高度为80px，显示更少的li
  }
}

通过以上代码，在屏幕尺寸小于768px时，我们可以将最大高度设置成80px，以控制显示更少的li。

总之，CSS是一项灵活的样式表语言，在控制显示li数量方面也有多种方法可供选择，需要根据实际需求进行适配调整。