[分享]css中怎么把ul横着排

在CSS中，我们可以使用flex布局或者float属性来让无序列表（ul）横向排列。 使用flex布局：

css
ul {
  display: flex;
  list-style: none; /* 去掉默认的圆点 */
  padding: 0; /* 去除padding */
}

li {
  flex: 1; /* 平分宽度 */
} 

使用float属性：

css
ul {
  list-style: none; /* 去掉默认的圆点 */
  padding: 0; /* 去除padding */
}

li {
  float: left;
  width: 33.33%; /* 每个li占据三分之一宽度 */
} 

以上代码均适用于无序列表（ul）的横向排列。 以下是使用P标签的段落：

CSS的flex布局和float属性都可以让无序列表（ul）横向排列。

使用flex布局时，设置ul的display属性为flex，然后设置li的flex属性为1，即可让每个li等分宽度，从而实现横向排列。

当使用float属性时，将每个li设置为float:left，并设置宽度为33.33%（即每列三个），也可实现横向排列的效果。

以下是代码段，使用pre标签：

ul {
  display: flex;
  list-style: none; /* 去掉默认的圆点 */
  padding: 0; /* 去除padding */
}

li {
  flex: 1; /* 平分宽度 */
}

或者

ul {
  list-style: none; /* 去掉默认的圆点 */
  padding: 0; /* 去除padding */
}

li {
  float: left;
  width: 33.33%; /* 每个li占据三分之一宽度 */
} 

使用pre标签可以保留代码的格式，更加清晰易读，方便阅读者理解并使用。