在實際工作當中經常會遇到像上面這樣的布局，就是不確定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兼容性的話，建議用后兩種。如果有更多方法，歡迎吐槽！

總結

以上是生活随笔為你收集整理的html的li浮动之后往下移动,多个li浮动后居中显示问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。