在使用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>