最近做了一個網站，里面的圖片要求能在一行中均勻分布，實現的方法有很多，總結為以下幾種：
一、float布局+width加寬
這個方法實現的起來很簡單，下面就是加寬了50px。但是這樣有時會出現一些問題，一是給ul添加樣式的時候，比如背景顏色、邊框等；二是在這一行元素后面緊跟着其他元素。當然也有利用margin負值的方法，只是我個人感覺出現的問題都差不多。解決的方法是在外面再嵌套一層div，只是這樣一來代碼略顯臃腫，當然為了兼容，這也是最常用、最快速的方法（加寬可以向后加寬，也可以向前加）。
<style> ul{padding: 0; width: 750px; list-style: none; border: dashed 1px #ccc; overflow: hidden;} li{float: left; margin-right: 50px; width: 100px; height: 50px; background: #999} </style>
二、display：inline-block/text-align:justify
該方法確實是一個簡單有效的方法，有篇文章介紹的很詳細：display:inline-block/text-align:justify下列表的兩端對齊布局
但是text-align有個硬傷，那就是元素必須超過一行，如果現在我只想來一個一行的圖片均勻排布，那就需要在加一個無語義的標簽用於使之前的元素兩端對齊。這樣的方法其實和clear一樣，雖然方便，但會增加無意義的標簽。
（2017-05-04）當然現在回過來看的話，還是可以用偽類來實現的，只不過inline-block 在ie9以下不支持
三、使用justify-content:space-between
四、使用css3的column方法
（這兩個方法並不是很常見，可參考：http://www.cnblogs.com/PeunZhang/p/3289493.html）
五、display：table-cell
這個方法很強大，只是被大家挖掘的比較少。該方法用於圖片的均勻分布還是很方便的，可以使用width控制寬度，使用padding來調節間距。
（2017-05-04另外，該方法還可以用來實現垂直居中，只是ie7以下不支持 在此引用一下鑫前輩的文章http://www.zhangxinxu.com/wordpress/?p=1187）
六、css相鄰元素選擇器
這個方法很實用，它對第一個元素不起作用，對后面的可以操作【其實就是相當於對所有li添加樣式，然后在對li:first-child初始化】，下面是css樣式：
ul{padding: 0; list-style: none; width: 700px; border: dashed 1px #ccc; overflow: hidden; text-align: justify;} li{float: left; width: 100px; height: 50px; background: #999} li+li{margin-left: 50px;}
結果是完美的，沒有額外的標簽，也不會產生什么問題，當然如果是有多行圖片的話，這個方法還是力有未逮的。
（2017-05-04）除非指定換行的元素添加上class類，不過最近看到css對於性能的影響的文章，css在渲染時執行的效率是：id > 層級+id > class > 層級+class > 標簽 > 層級+標簽
所以如果這些元素是固定數量的話，添加上class，綜合html大小和css渲染效率，還是可取的。
七、flex布局
現在還要在加上flex布局，這個方法確實很強大，網上教程很多，在此就不贅述了，這是阮一峰前輩的文章http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html