css如何设置li换行显示

在CSS中，我们使用list-style属性来设置li元素的样式。但是有时候，我们希望li元素能够自动换行显示，这该如何设置呢？

首先，我们需要为li元素设置display属性为inline-block，这样可以让li元素在一行内显示，但是如果内容太多，会超出容器的范围，因此我们还需要设置width属性，使其能够根据容器大小自适应。代码如下：

ul li {
    display: inline-block;
    width: 100px;
}

如果我们不希望设置li元素的宽度，而是希望根据容器大小自动调整换行，我们可以使用flexBox布局，通过设置容器的flex-wrap属性为wrap，让li元素自动换行。代码如下：

ul {
    display: flex;
    flex-wrap: wrap;
}
ul li {
    flex: 0 0 auto;
}

以上就是两种常见的设置li元素自动换行显示的方法，选择哪一种方法，可以根据具体情况来决定。需要注意的是，在使用flexBox布局时，兼容性可能会有一些问题，需要考虑到浏览器兼容性的问题。