[分享]css列表一行显示

CSS 列表是网页设计中常用的元素，它可以方便地帮助我们展示信息。但是，经常会遇到当列表项过多时，需要限制每行显示的数量，否则列表会超出容器的宽度，显得非常丑陋。下面介绍两种实现列表一行显示的方法。方...

CSS 列表是网页设计中常用的元素，它可以方便地帮助我们展示信息。但是，经常会遇到当列表项过多时，需要限制每行显示的数量，否则列表会超出容器的宽度，显得非常丑陋。下面介绍两种实现列表一行显示的方法。

方法一：

ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
}

li {
  width: 25%;
} 

这种方法使用了 Flexbox 布局，将列表项设置为等分的四份，每行显示四个列表项。同时，使用了 flex-wrap 属性将多余的列表项自动转移到下一行。

方法二：

ul {
  list-style: none;
  padding: 0;
}

li {
  display: inline-block;
  width: 25%;
  box-sizing: border-box;
} 

这种方法使用了 display:inline-block 属性，将列表项排成一行，并设置它们的宽度为四份，同时使用 box-sizing:border-box 属性将边框和内边距尺寸纳入宽度计算。

两种方法都可以实现列表一行显示，根据不同的需求选择适合的方法即可。