css如何让li横排显示

CSS是前端开发中不可或缺的技术之一，如何使用CSS让li元素横排显示呢？

ul{
  list-style:none; /*去除默认样式*/
  margin:0;
  padding:0;
}
li{
  display:inline-block; /*将li元素转为行内块元素*/
  margin-right:10px; /*设置元素之间的间隔*/
}

首先，我们需要将ul元素的默认样式去除，防止可能出现的样式冲突。然后，将li元素的display属性设置为inline-block，这样它们就能够排列在同一行了。我们还可以通过设置margin属性来控制它们之间的间隔。

需要注意的是，设置为行内块元素的li元素间会有一个间隔，所以我们可以通过设置父元素的font-size为0来消除这个间隔。最后，我们还可以使用float属性来实现横向排列，但是需要注意清除浮动。

ul{
  list-style:none;
  margin:0;
  padding:0;
  font-size:0; /*消除行内块元素之间的间隔*/
}
li{
  display:inline-block;
  margin-right:10px;
  font-size:16px; /*恢复字体大小*/
}
.clearfix::after { /*清除浮动*/
  content: "";
  display: table;
  clear: both;
}

使用以上方法，可以很方便地实现li元素的横向排列。但需要注意的是，在使用行内块元素进行排列时，元素之间会有一个间隔。所以我们需要根据实际情况来设置元素之间的间隔。同时，如果使用float属性进行排列，需要清除浮动，以免出现意想不到的问题。