1. 問題現象
先看下面的html結構:
<div> <ul> <li><img src='./img/1.jpg'></li> <li><img src='./img/2.jpg'></li> <li><img src='./img/3.jpg'></li> <li><img src='./img/4.jpg'></li> </ul> </div>
外層div設定了固定寬度，css中ul的寬度未設置(因為li的個數不確定)，當通過javascript動態設置ul的寬度后，會導致li換行。
2. 分析
嘗試將ul的寬度增大，問題消失，推測是計算的ul寬度不准確，經過思考推敲，原來是我為li設置了1px的borde，但是計算ul寬度時，沒有考慮到border，將border寬度加進去，一切正常。
ul的寬度 = （li的width + li的左右margin + border）*li的length。
3. 總結
已經遇到過幾次了，一直沒有找到原因，在網上曾搜索到兩種解決方法：
一種是：給ul添加 white-space:nowrap; 將li的 float:left; 改成 display:inline-block; 試了,chrome、ff、ie8以上不會換行，但是最后一個li內容不能顯示完全，ie6,7則無任何作用。
另外一種是：將li設置為 display:table-cell; 同時li的margin改成padding，但是這樣的話,影響了本來的布局。
所以，當你遇到ul的li有一個或幾個換了行，請先確認下有沒有為li設置了border，如果有，那么檢查下ul的寬度是否已經考慮了border。如果li沒有border，那么可以試試我說的上面那兩種解決方法。