排产品时,解决border占用宽度问题

解决代码

<style>
	.pro li{
		list-style: none;
		 150px;
		height: 200px;

		float: left;
		border: 1px solid red;
		
		/*关键:给每个盒子加一个-1的位置,即向左移动1像素*/
		margin-left: -1px;
	}
</style>
<!-- 排产品时让多个产品都有边框,产生一个问题:border会占一像素,造成总宽度增加 -->
<ul class="pro">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	
</ul>
<div style="clear: both;"></div>

正常排产品效果:

  • 1
  • 2
  • 3
  • 4

解决效果:

  • 1
  • 2
  • 3
  • 4
原文地址:https://www.cnblogs.com/chenxi188/p/13701168.html