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

解决代码

<style>
	.pro li{
		list-style: none;
		width: 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

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

原文：https://www.cnblogs.com/chenxi188/p/13701168.html