上下两个布局都有问题.首先使用类名的时候尽量不要使用和标签名字重复,其次就是你的布局.width:auto;根据对象实际大小自适应宽度.你center就那么大,所以他就占那么大.
如果你想要这种效果的话可以这样写
.clearfix:after{clear:both;content:" ";display:block;font-size:0;height:0;visibility:hidden;}
.ul{padding:0; margin:0; width:100%; height:30px; border:1px solid #00f;box-sizing:border-box; margin-bottom:10px;}
.ul li{height:30px; background:#0FF; float:left;list-style:none;}
.ul .left{ width:10%; background:#F00;}
.ul .right{ width:15%; background:#f0f;}
.cen{width:75%; background:#0FF; height:30px;}
* html .ul{zoom: 1;}
*:first-child + html .ul{zoom: 1;}
