解决ul的li横向排列换行的问题

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，那么可以试试我说的上面那两种解决方法。