css如何让li水平并排 |电商网站模板css

/*首先设置ul为无序列表*/
ul{
list-style:none;
margin:0;
padding:0;
}
/*然后设置li为水平排列*/
li{
display:inline-block; /*设置为行内块级元素*/
margin-right:20px; /*设置每个li元素之间的间距*/
}

以上代码就是实现让li水平并排的关键步骤。大家使用了两个CSS属性：display和margin。通过设置display为inline-block，每个li元素就相当于一个行内块级元素，可以让它们水平排列。而通过设置margin来控制每个li元素之间的距离，就可以达到大家想要的效果。

除此之外，大家还可以通过一些其他的方式来让li水平并排。比如使用float属性，设置li元素为float:left。不过，需要注意的是使用float属性可能会有一些副作用，如出现奇怪的空隙或者浮动失效等问题，需要进行适当的调整。

/*使用float属性来让li水平排列*/
li{
float:left;
margin-right:20px;
}
/*清除浮动*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

总的来说，让li水平并排是网页设计中一个非常实用的技巧。在实际开发中，大家需要根据具体的需求来灵活运用这些CSS属性，达到最理想的效果。