如何解决ul中li的边距问题

来源：互联网发布：跑腿软件排名编辑：程序博客网时间：2024/05/22 15:46

在使用css经常遇到li右边距多出导致换行的问题。

<body><div class="box clearfix"><ul><li><img src="img/img.jpg"></li><li><img src="img/img.jpg"></li><li><img src="img/img.jpg"></li><li><img src="img/img.jpg"></li></ul></div></body>

解决方法1：div溢出隐藏、ul负边距

<style>.clearfix{clear: both;overflow: hidden;} .box{width: 1200px;margin: auto;}       li{list-style: none;float: left;width:285px;height:200px;background-color:#0000FF;margin-right: 20px;overflow: hidden;} ul{margin-right:-20px;}</style>

解决办法2：

<style>.box{width:62.5%;margin:50px auto;}     li{list-style: none;float: left;width: 22%;margin-right: 3%;}     li img{width: 100%;}     ul{width: 103%;} <style>

解决办法3：给最后一个li的右边距设置为0

<style>.box{width:62.5%;margin:50px auto;}     li{list-style: none;float: left;width: 22%;margin-right: 4%;}     li img{width: 100%;}     li:last-child{margin-right:0;}</style>

1 0