ul li的有关问题，调了几天还是没搞好
日期：2014-05-17 浏览次数：20732 次
ul li的问题，调了几天还是没搞好
<STYLE type=text/css>
ul{display: inline;list-style:none;}
li {float:left;font-size:12px;}
</STYLE> </HEAD> <BODY>
<DIV style= "WIDTH:100% ">
<UL>
<LI id=tdType0 style= "WIDTH:25% "> <A href= "# "> 音乐 </A> </LI>
<LI id=tdType1 style= "WIDTH:25% "> <A href= "# "> 音乐 </A> </LI>
<LI id=tdType2 style= "WIDTH:25% "> <A href= "# "> 音乐 </A> </LI>
<LI id=tdType3 style= "WIDTH:25% "> <A href= "# "> 音乐 </A> </LI>
</UL> </DIV>
我希望UL中的LI能像table中的td一样永远在一行排列，但最后一个LI经常跑到第二行。试了一大堆CSS属性还是没搞定，大家帮忙！
说明：LI是被动态输出的，其width是用百分比平均分配的，所以刚好填满100。事实上，这些LI有时候在一列排列(这就正常)，有时候最后一个LI另起一行。
(我所说的“经常”是指LI的个数变动后----width会按100的比例平均分配)
------解决方案--------------------
这是一个LI宽度的取值问题。
======================================
<style type= "text/css ">
ul {margin:0; padding:0; list-style:none; width:400px; }
li {display:inline; font-size:12px; width:25%; text-align:center; }
</style>
<div>
<ul>
<li> <a href= "# "> 音乐 </a> </li>
<li> <a href= "# "> 音乐 </a> </li>
<li> <a href= "# "> 音乐 </a> </li>
<li> <a href= "# "> 音乐 </a> </li>
</ul>
</div>
======================================
楼主可以拿上面这段代码测试，显示效果应该为正常，并不换行。
然后把UL的width修改为401px，继续测试，效果仍然为正常，不换行。
UL width:402px; width:403px时均换行。
修改为404px后返回正常。
造成这个效果的原因是，当你的内部以“%”取值时，如果取值结果为小数时，则结果四舍五入！！
比如上例中，
400*25%=100，故LI width;100px; 所以100*4=400，正常显示；
401*25%=100.25，故LI width;100px; 所以100*4=400，正常显示；
402*25%=100.5，故LI width;101px; 所以101*4=404，换行；
403*25%=100.75，故LI width;101px; 所以101*4=404，换行；
404*25%=101，故LI width;100px; 所以100*4=404，（此时的UL宽度也为404）正常显示；
解决方法：
为UL中加入属性white-space:nowrap; overflow:hidden;
代码：
<style type= "text/css ">
ul {margin:0; padding:0; list-style:none; width:403px; white-space:nowrap; overflow:hidden;}
li {display:inline; font-size:12px; width:25%; text-align:center; }
</style>
<div>
<ul>
<li> <a href= "# "> 音乐 </a> </li>
<li> <a href= "# "> 音乐 </a> </li>
<li> <a href= "# "> 音乐 </a> </li>
<li> <a href= "# "> 音乐 </a> </li>
</ul>
</div>
<STYLE type=text/css>
ul{display: inline;list-style:none;}
li {float:left;font-size:12px;}
</STYLE> </HEAD> <BODY>
<DIV style= "WIDTH:100% ">
<UL>
<LI id=tdType0 style= "WIDTH:25% "> <A href= "# "> 音乐 </A> </LI>
<LI id=tdType1 style= "WIDTH:25% "> <A href= "# "> 音乐 </A> </LI>
<LI id=tdType2 style= "WIDTH:25% "> <A href= "# "> 音乐 </A> </LI>
<LI id=tdType3 style= "WIDTH:25% "> <A href= "# "> 音乐 </A> </LI>
</UL> </DIV>
我希望UL中的LI能像table中的td一样永远在一行排列，但最后一个LI经常跑到第二行。试了一大堆CSS属性还是没搞定，大家帮忙！
说明：LI是被动态输出的，其width是用百分比平均分配的，所以刚好填满100。事实上，这些LI有时候在一列排列(这就正常)，有时候最后一个LI另起一行。
(我所说的“经常”是指LI的个数变动后----width会按100的比例平均分配)
------解决方案--------------------
这是一个LI宽度的取值问题。
======================================
<style type= "text/css ">
ul {margin:0; padding:0; list-style:none; width:400px; }
li {display:inline; font-size:12px; width:25%; text-align:center; }
</style>
<div>
<ul>
<li> <a href= "# "> 音乐 </a> </li>
<li> <a href= "# "> 音乐 </a> </li>
<li> <a href= "# "> 音乐 </a> </li>
<li> <a href= "# "> 音乐 </a> </li>
</ul>
</div>
======================================
楼主可以拿上面这段代码测试，显示效果应该为正常，并不换行。
然后把UL的width修改为401px，继续测试，效果仍然为正常，不换行。
UL width:402px; width:403px时均换行。
修改为404px后返回正常。
造成这个效果的原因是，当你的内部以“%”取值时，如果取值结果为小数时，则结果四舍五入！！
比如上例中，
400*25%=100，故LI width;100px; 所以100*4=400，正常显示；
401*25%=100.25，故LI width;100px; 所以100*4=400，正常显示；
402*25%=100.5，故LI width;101px; 所以101*4=404，换行；
403*25%=100.75，故LI width;101px; 所以101*4=404，换行；
404*25%=101，故LI width;100px; 所以100*4=404，（此时的UL宽度也为404）正常显示；
解决方法：
为UL中加入属性white-space:nowrap; overflow:hidden;
代码：
<style type= "text/css ">
ul {margin:0; padding:0; list-style:none; width:403px; white-space:nowrap; overflow:hidden;}
li {display:inline; font-size:12px; width:25%; text-align:center; }
</style>
<div>
<ul>
<li> <a href= "# "> 音乐 </a> </li>
<li> <a href= "# "> 音乐 </a> </li>
<li> <a href= "# "> 音乐 </a> </li>
<li> <a href= "# "> 音乐 </a> </li>
</ul>
</div>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
