五列均分的简易实现方法

项目中需要五列均分,每个间隔两个像素的效果,查了一些资料,比如 box-flex,自己找了一个最简单的解决方法,实现一下,其实最后一列是大了两个像素。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{margin:0;padding:0;}
.wrap{width:auto;height:50px;background:#000;}
.wrap ul{width:auto;}
.wrap ul li{float:left;position:relative;height:2px;width:20%;list-style:none;overflow:hidden;}
.wrap ul li:after{content:'';position:absolute;left:-2px;top:0;width:100%;height:2px;background:#FC0;}
.wrap ul li:last-child:after{left:0;}
</style>
</head>

<body>
<div class="wrap">
	<ul>
    	<li></li><li></li><li></li><li></li><li></li>
    </ul>
</div>
</body>
</html>