解决ul的li横向排列换行的问题
2016-08-04 14:01
399 查看
1. 问题现象
先看下面的html结构:
外层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,那么可以试试我说的上面那两种解决方法。
先看下面的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,那么可以试试我说的上面那两种解决方法。
相关文章推荐
- 关于ul中li横向排列时各自的margin问题解决
- 用word-wrap来解决固定大小ul下的每条li中内容太多时不自动换行问题
- HTML+CSS解决ul和li的错位、换行问题
- 解决ul li水平排列问题
- HTML中<ul>标签中的<li>横向排列
- HTML中的<UL>标签中li横向排列
- 让ul中的li变成横向排列
- 1.ul中li整个横向居中显示问题
- HTML中的<UL>标签中li横向排列
- css ul li导航菜单居中问题解决方法
- div滑动门 repeater内容中的ul li 不能对齐的问题解决
- 解决ie6下li左浮动文字换行的问题
- 如何解决ul中li的边距问题
- CSS的ul和li实现横向排列和去掉li的点
- ul中的li的高度在IE6、IE7、IE8、FF下不兼容问题的解决办法
- ui li 横向排列 换行问题
- HTML中的<UL>标签中li横向排列
- HTML中的<UL>标签中li横向排列
- div ul li 嵌套后如何解决增加多个li后ul高度自适应问题
- ul中的li的高度在IE6、IE7、IE8、FF下不兼容问题的解决办法