Li的横向排列自适应宽度问题_css

　　众所周知，FF和OPERA即其它遵循css2标准的浏览器由于版本的不断改进，早就支持:

　　display:table

　　dispaly:table-cell

　　dispaly:table-row

　　dispaly:table-row- group

　　dispaly:table-column

　　dispaly:table-column-group

　　等属性。

　　(至少是 FF1.0,OPERA7就能支持了，之前的就不太清楚了)那还犹豫什么?开始动手吧(为了演示加了一些 padding和border):

<!DOCTYPE <a href="https://www.gaodaima.com/go.html?url=http://www.gaodaima.com/tag/html" title="html" rel="nofollow" target="_blank">html</a> PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “<a href="https://www.gaodaima.com/go.html?url=http://www.w3.org/TR/x" rel="nofollow">http://www.w3.org/TR/x</a><a href="https://www.gaodaima.com/tag/html" title="查看更多关于html的文章" target="_blank">html</a>1/DTD/xhtml1-transitional.dtd”><html xmlns=”<a href="https://www.gaodaima.com/go.html?url=http://www.w3.org/1999/xhtml”><head><meta" rel="nofollow">http://www.w3.org/1999/xhtml”><head><meta</a> http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /><title>Normal</title><style type=”text/css”><!–*{ margin:0px; padding:0px;}#d{ display:table; margin:0 auto; background:#0cf; padding:10px; width:80%; border:1px solid #f00;}#d ul{ display:table-row-group;}#d li{ display:table-cell; list-style:none; border:1px solid #333; background:red; text-align:center;}–></style></head><body><div id=”d”> <ul> <li>aaa</li> <li>aaa</li> <li>aaa</li> <li>aaa</li> <li>aaa</li> </ul></div></body></html>[/code] <br /><button onclick=Preview(code)>运行代码</button><button onclick=copyCode(code)>复制代码</button><button onclick=saveCode(code)>另存代码</button><button onclick=addBookmark(document.title,location.href)>收藏本页</button> IE不支持该效果，FF和OPERA下看看。</p> <p>上面的示例分别定义了</p> <table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing=0 cellpadding=6 width="95%" align=center border=0> <tr> <td style="WORD-WRAP: break-word" bgcolor=#f3f3f3>#d{ <br /> display:table; <br />} <br />#d ul{ <br /> display:table-row-group; <br />} <br />#d li{ <br /> display:table-cell; <br />}</td> </tr> </table> <p>那么它们在CSS2的样式里表现就分别相当于表格的</p> <table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing=0 cellpadding=6 width="95%" align=center border=0> <tr> <td style="WORD-WRAP: break-word" bgcolor=#f3f3f3><tabel> <br /><tr> <br /><td></td> </tr> </table> <p>标签，这样上面第一个示例里的5个 <li>就自然的被均分横向排列在#b和#b ul里，一切都很正常，表格都是这么解释的。然而，细心的朋友又会想到另一个问题，当#d的宽度不能被所包含的#d li的节点数整除，#d li的宽度又是如何均分#d的宽度呢？它在浏览器下宽度尺寸又是如何表现的呢？为了说明问题，重新定义一个不被#d li的节点数整除的#d的宽度，这里任意给个799px，在FF/opera下测试看看:</p> <p><textarea style="WIDTH: 500px; HEIGHT: 200px"><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “<a href="https://www.gaodaima.com/go.html?url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><html" rel="nofollow">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><html</a> xmlns=”<a href="https://www.gaodaima.com/go.html?url=http://www.w3.org/1999/xhtml”><head><meta" rel="nofollow">http://www.w3.org/1999/xhtml”><head><meta</a> http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /><title>Normal</title><style type=”text/<a href="https://www.gaodaima.com/tag/css" title="查看更多关于css的文章" target="_blank">css</a>“><!–*{ margin:0px; padding:0px;}#d{ display:table; margin:0 auto; background:#0cf; padding:10px; width:799px; border:1px solid #f00;}#d ul{ display:table-row-group;}#d li{ display:table-cell; list-style:none; border:1px solid #333; background:red; text-align:center;}–></style></head><body><div id=”d”> <ul> <li>aaa</li> <li>aaa</li> <li>aaa</li> <li>aaa</li> <li>aaa</li> </ul></div><script type=”text/<a href="https://www.gaodaima.com/go.html?url=http://www.gaodaima.com/tag/javascript" title="JavaScript" rel="nofollow" target="_blank">JavaScript</a>“>var d=document.getElementById(“d”);var c=d.getElementsByTagName(“li”);var l=c.length;for(var i=0;i<l;i++)alert(c[i].offsetWidth)</script></body></html>[/code] <br /><button onclick=Preview(code2)>运行代码</button><button onclick=copyCode(code2)>复制代码</button><button onclick=saveCode(code2)>另存代码</button><button onclick=addBookmark(document.title,location.href)>收藏本页</button></p> <p><font face=Verdana>这个在IE下就不用测试了，我也没加非IE的判定，偷了个懒。</font></p> <p>既然FF和OPERA都基于上述原理来解释这种类似表格的样式，IE又不支持，何不为其设定一个相同的解释机制呢？<br />我们先来看看IE下我们所能做作的：</p> <p><textarea style="WIDTH: 500px; HEIGHT: 200px"><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “<a href="https://www.gaodaima.com/go.html?url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><html" rel="nofollow">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><html</a> xmlns=”<a href="https://www.gaodaima.com/go.html?url=http://www.w3.org/1999/xhtml”><head><meta" rel="nofollow">http://www.w3.org/1999/xhtml”><head><meta</a> http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /><title>Normal</title><style type=”text/css”><!–*{ margin:0px; padding:0px;}body{ text-align:center;}#d{ display:table; margin:0 auto; background:#0cf; padding:10px; width:799px; border:1px solid #f00;}#d ul{ display:table-row-group;}#d li{ display:table-cell; list-style:none; _float:left; width:158px; border:1px solid #333; background:red; text-align:center;}–></style></head><body><div id=”d”> <ul> <li>aaa</li> <li>aaa</li> <li>aaa</li> <li>aaa</li> <li style=”width:157px”>aaa</li> </ul></div></body></html>[/code] <br /><button onclick=Preview(code3)>运行代码</button><button onclick=copyCode(code3)>复制代码</button><button onclick=saveCode(code3)>另存代码</button><button onclick=addBookmark(document.title,location.href)>收藏本页</button></p> <p>这里定义了#d li向左浮动，也分别定义了它们的宽度（注：这里因为设定了其border为1px，宽度就是158px了）。为了防止FF/OPERA识别浮动，用了_float:left; </p> <p>OK――这回可以在IE下测试了――相当完美！当然FF/OPERA下当然也一样到此，如果你认为问题解决了，并且你平时也是这么做的――那么你现在可以关闭这个话题了，该忙什么就忙什么吧！</p> <p>然而，问题是当我们的设定#d的宽度为798px呢？――那再给倒数第二个#d li加个样式来设定宽度width:157px不就得了？那如果再重新设定#d的宽度为797px、796px……呢？（也许你设计完成一个页面后再也不会动这些宽度尺寸了）但再麻烦点的是如果#d li的节点数需要调整了――表现为我们在日常的网站开发和维护中往往会增加或减少这种导航列表栏目，是否还要重新计算和分别设定这些#d li的宽度呢？</p> <p>这不算很麻烦，我的数学还不至于那么差劲――也许你会说。<br />但真正麻烦的是：当我们在做一个按百分比来进行页面及横向导航的设计时，这些#d li的宽度又该如何设定呢？还是实例为王，下面只是对上面的示例做个小小的改动，还好是5个#d li节点，正好每个宽度是20％：</p> <p><textarea style="WIDTH: 500px; HEIGHT: 200px"><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “<a href="https://www.gaodaima.com/go.html?url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><html" rel="nofollow">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><html</a> xmlns=”<a href="https://www.gaodaima.com/go.html?url=http://www.w3.org/1999/xhtml”><head><meta" rel="nofollow">http://www.w3.org/1999/xhtml”><head><meta</a> http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /><title>Normal</title><style type=”text/css”><!–*{ margin:0px; padding:0px;}body{ text-align:center;}#d{ display:table; margin:0 auto; background:#0cf; padding:10px; width:80%; border:1px solid #f00;}#d ul{ display:table-row-group;}#d li{ display:table-cell; list-style:none; _float:left; width:20%; border:1px solid #333; background:red; text-align:center;}–></style></head><body><div id=”d”> <ul> <li>aaa</li> <li>aaa</li> <li>aaa</li> <li>aaa</li> <li>aaa</li> </ul></div></body></html>[/code] <br /><button onclick=Preview(code4)>运行代码</button><button onclick=copyCode(code4)>复制代码</button><button onclick=saveCode(code4)>另存代码</button><button onclick=addBookmark(document.title,location.href)>收藏本页</button></p> <p>测试好像也很不错，似乎没什么不如意的地方（可能在有些机器上会折行）。再调整一下分辨率看看 ――还是挺好的啊（可能在有些机器上会折行）！那么你在试试缩小IE窗口（不是最小化到任务栏），如果还是正常的话（相信有些朋友的导航效果已经开始出现折行了）――我会有办法让你沮丧的把你的<u>鼠标</u>放在缩小后的IE窗口的右边框上，横向逐渐逐渐拖动缩放IE的窗口――不用多说，很多朋友肯定早已明白这当中的原由，这里乱幌轮饕钦攵砸恍┎惶靼椎男氯耍先司秃雎哉舛伟杉虻ニ狄幌拢 <br />上例中设定的#d的百分比宽度为80%，那么这个宽度自然会随着IE窗口大小的改变而改变，如果调整后的IE窗口为999，那么这时这个#d的实际宽度为 792，这个宽度自然不能被#d li的节点数整除，也就是20%宽度不为整数（浏览器显示的最小单位是1象素，不能再分了，可能是四舍五入），很自然就会出现#d li的宽度和大于#d的实际宽度而导致折行现象了。</p> <p>天哪！差点忘了，上面#d li定义了 border为1px，则#d li的宽度总和为100%+10px了，赶紧去掉再试试――这回好像可以了，再也没有出现上面的现象，IE好像没有对#d li的实际宽度进行四舍五入<a href="https://www.gaodaima.com/go.html?url=http://www.gaodaima.com/tag/%e7%ae%97%e6%b3%95" title="算法" rel="nofollow" target="_blank">算法</a>。难道这里就不能再额外设定#d li的 border和padding了吗？<br />这还不算，最糟糕的是：<br />如果#d li的节点数为3/7/9/11……等等根本不能均分#d宽度的值，你又得分别设定每个#d li的百分比，使它们的总和等于100%了。而且依旧不能再额外设定#d li的border和padding</p> <p>另外：在#d的宽度为固定尺寸下，设定的#d li为百分比时，有时也会出现一些你不想看见的问题，相信很多朋友也遇到过。不了解的可以自己试试。</p> <p>欢迎大家阅读<span style='color:red;'>《Li的横向排列自适应宽度问题_css》</span>,跪求各位点评,若觉得好的话请收藏本文，by <strong>搞代码</strong></p> <hr /><div class="open-message">搞代码网（<a href="www.gaodaima.com" target="_blank" title="gaodaima.com">gaodaima.com</a>）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱<a>chengxuyuan@gaodaima.com‍</a>，我们会在看到邮件的第一时间内为您处理，或直接联系<a>QQ：872152909</a>。本网站采用<a href="https://www.gaodaima.com/go.html?url=http://creativecommons.org/licenses/by-nc-sa/3.0/" rel="nofollow" target="_blank" title="BY-NC-SA授权协议">BY-NC-SA</a>协议进行授权 <br >转载请注明原文链接：<a href="https://www.gaodaima.com/22200.html" target="_blank" title="Li的横向排列自适应宽度问题_css">Li的横向排列自适应宽度问题_css</a><a id="spreadAds" target="_blank" href="" onclick="spreadAds()"></a><a id="spreadAds2" target="_blank" href=""></a> </div> </p> <div class="article-social"> <a href="javascript:;" data-action="ding" data-id="22200" id="Addlike" class="action"><i class="fa fa-heart-o"></i>喜欢 (<span class="count">0</span>)</a><span class="or"><style>.article-social .weixin:hover{background:#fff;}</style><a class="weixin" style="border-bottom:0px;font-size:15pt;cursor:pointer;">赏<div class="weixin-popover"><div class="popover bottom in"><div class="arrow"></div><div class="popover-title"><center>[搞代码]</center></div><div class="popover-content"><img width="200px" height="200px" src="http://www.gaodaima.com/wp-content/uploads/hai_AliPay.png" ></div></div></div></a></span><span class="action action-share bdsharebuttonbox"><i class="fa fa-share-alt"></i>分享 (<span class="bds_count" data-cmd="count" title="累计分享0次">0</span>)<div class="action-popover"><div class="popover top in"><div class="arrow"></div><div class="popover-content"><a href="#" class="sinaweibo fa fa-weibo" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_qzone fa fa-star" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="qq fa fa-qq" data-cmd="sqq" title="分享到QQ好友"></a><a href="#" class="bds_renren fa fa-renren" data-cmd="renren" title="分享到人人网"></a><a href="#" class="bds_weixin fa fa-weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_more fa fa-ellipsis-h" data-cmd="more"></a></div></div></div></span></div> </article> <footer class="article-footer"> <div class="article-tags"><i class="fa fa-tags"></i><a href="https://www.gaodaima.com/tag/css" rel="tag">css</a><a href="https://www.gaodaima.com/tag/html" rel="tag">html</a><a href="https://www.gaodaima.com/tag/java" rel="tag">java</a><a href="https://www.gaodaima.com/tag/javascript" rel="tag">JavaScript</a><a href="https://www.gaodaima.com/tag/%e7%ae%97%e6%b3%95" rel="tag">算法</a></div></footer> <nav class="article-nav"><div class="_d13vl98i0pw"></div><script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6795176", container: "_d13vl98i0pw", async: true });</script> </nav><div id="donatecoffee" style="overflow:auto;display:none;"><img width="400" height="400" alt="支持作者一杯咖啡" src="http://www.gaodaima.com/wp-content/uploads/hai_AliPay.png"></div> <div class="related_top"> <div class="related_posts"><ul class="related_img"> <li class="related_box" > <a href="https://www.gaodaima.com/432440.html" title="java怎么样学java正确" target="_blank"><img class="thumb" style="width:185px;height:110px" data-original="https://www.gaodaima.com/wp-content/themes/Git-alpha/timthumb.php?src=https://www.gaodaima.com/wp-content/themes/Git-alpha/assets/img/pic/5.jpg&h=110&w=185&q=90&zc=1&ct=1" alt="java怎么样学java正确" /><br><span class="r_title">java怎么样学java正确</span></a> </li> <li class="related_box" > <a href="https://www.gaodaima.com/432401.html" title="Java面试题（11）" target="_blank"><img class="thumb" style="width:185px;height:110px" data-original="https://www.gaodaima.com/wp-content/themes/Git-alpha/timthumb.php?src=https://www.gaodaima.com/wp-content/themes/Git-alpha/assets/img/pic/3.jpg&h=110&w=185&q=90&zc=1&ct=1" alt="Java面试题（11）" /><br><span class="r_title">Java面试题（11）</span></a> </li> <li class="related_box" > <a href="https://www.gaodaima.com/432366.html" title="软件构造 03 正则表达式" target="_blank"><img class="thumb" style="width:185px;height:110px" data-original="https://www.gaodaima.com/wp-content/themes/Git-alpha/timthumb.php?src=https://www.gaodaima.com/wp-content/themes/Git-alpha/assets/img/pic/9.jpg&h=110&w=185&q=90&zc=1&ct=1" alt="软件构造 03 正则表达式" /><br><span class="r_title">软件构造 03 正则表达式</span></a> </li> <li class="related_box" > <a href="https://www.gaodaima.com/432360.html" title="类和对象的概念与类和对象的关系" target="_blank"><img class="thumb" style="width:185px;height:110px" data-original="https://www.gaodaima.com/wp-content/themes/Git-alpha/timthumb.php?src=https://www.gaodaima.com/wp-content/themes/Git-alpha/assets/img/pic/4.jpg&h=110&w=185&q=90&zc=1&ct=1" alt="类和对象的概念与类和对象的关系" /><br><span class="r_title">类和对象的概念与类和对象的关系</span></a> </li> </ul><div class="relates"><div class="_mw9fz31sqco"></div><script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6795180", container: "_mw9fz31sqco", async: true });</script><ul><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/432359.html">面向对象思想概述、类和对象概念、类和对象的关系</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/432357.html">4.15软工学习周报</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/432314.html">Java面向对象下笔记&1000以内素数</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/432291.html">学习Java应该留意的问题</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/432250.html">Java集合框架(四)-HashMap</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/432246.html">java学习</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/432243.html">Java 入门与进阶P-7.1+P-7.2</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/432233.html">Java方法</a></li></ul></div></div> </div> <div id="comment-ad" class="banner banner-related"><div class="_9madbukio7r"></div><script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6677406", container: "_9madbukio7r", async: true });</script><script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js" async="async" defer="defer" ></script></div> <div id="respond" class="no_webshot"> <form action="https://www.gaodaima.com/asdloie8574asdqwexzxdqwertasdqwe.php" method="post" id="commentform"> <div class="comt-title"> <div class="comt-avatar pull-left"> <img src="https://cdn.v2ex.com/gravatar/?s=50" class="avatar avatar-108"> </div> <div class="comt-author pull-left"> 发表我的评论 </div> <a id="cancel-comment-reply-link" class="pull-right" href="javascript:;">取消评论</a> </div> <div class="comt"> <div class="comt-box"> <textarea placeholder="说点什么吧…" class="input-block-level comt-area" name="comment" id="comment" cols="100%" rows="3" tabindex="1" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};">

评论通知

表情贴图加粗删除线居中斜体签到

Hi，您需要填写昵称和邮箱！