css ul li 3个一行

在CSS中，ul> 和li> 标签用于创建无序列表，ul> 标签定义列表，li> 标签定义列表项。

如果希望将列表项水平排列，可以使用CSS中的display:inline-block; ，并将li> 标签设置为三列。HTML代码如下：

ul>
      li>
    列表项1/li>
      li>
    列表项2/li>
      li>
    列表项3/li>
      li>
    列表项4/li>
      li>
    列表项5/li>
      li>
    列表项6/li>
    /ul>

对应的CSS代码如下：

ul {
      list-style: none;
     /* 去掉列表标记 */  margin: 0;
      padding: 0;
}
li {
      display: inline-block;
      width: 30%;
     /* 设置宽度 */  vertical-align: top;
      margin: 0 1.5%;
 /* 设置行间距 */}
    

其中，width:30%; 表示每个列表项占据父元素宽度的30%（设置为33.3%会导致每行后面有空白），vertical-align:top; 表示让列表项顶部对齐，margin:0 1.5%; 表示左右间距为1.5%。

这种方式可以用于创建图片墙、产品展示等页面元素。需要注意的是，如果列表项中包含图片，则需要将图片设置为width:100%; 以充满整个列表项。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！