html的li浮动之后往下移动,多个li浮动后居中显示问题

在实际工作当中经常会遇到像上面这样的布局，就是不确定li的个数，但是想让它在父元素内水平居中显示或是相对父元素两端对齐。

先看基础的

/p>

这样只能靠左显示。

解决方法目前搜集了三种：

第一种：利用css3选择器:nth-child(n)设定最后一列li的margin-right值为0。

这也是我第一反应想到的方法，添加

/p>

第二种：设置ul的margin-left为负值。

这是从猫爷的博客看到的，感觉很酷，也很简单

html 代码

HTML5

//老IE支持 html5 新标签

//老IE支持响应式标签

*{margin:0;padding: 0;}

.main{width:1180px;height:auto;margin:100px auto;border:1px solid #f00;}

.main ul{list-style: none;overflow: hidden;margin:0 auto;margin-left: -20px;}

.main ul li{width:280px;height:200px;margin-left:20px;margin-top:20px;background: #f00;float:left;}

原理：让ul整体向左移动一个li的margin-left值，第一个li不是多出来一个margin-left吗？让它移到与.mian对齐就好了

第三种：设置ul的宽度大于.mian的宽度，即为li总体宽度(li+margin值)

这是极客学院上提出的一种方法，也可以解决

html 代码

HTML5

//老IE支持 html5 新标签

//老IE支持响应式标签

*{margin:0;padding: 0;}

.main{width:1180px;height:auto;margin:100px auto;border:1px solid #f00;}

.main ul{width:1200px;list-style: none;overflow: hidden;margin:0 auto;}

.main ul li{width:280px;height:200px;margin-right:20px;margin-top:20px;background: #f00;float:left;}

总结：以上方法都可以解决，但是如果考虑到css3兼容性的话，建议用后两种。如果有更多方法，欢迎吐槽！