菜单运用li标签横向排列自适应宽度_div+css布局教程(2)_H5之家

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd\"><html xmlns=\"http://www.w3.org/1999/xhtml\"><head><meta 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>

测试似乎也很不错，似乎没什么不如意的地方（可能在有些机器上会折行）。再调整一下分辨率看看 ——还是挺好的啊（可能在有些机器上会折行）！那么你在试试缩小IE窗口（不是最小化到任务栏），假如还是正常的话（相信有些朋友的导航效果已经开始出现折行了）——我会有办法让你沮丧的把你的鼠标放在缩小后的IE窗口的右边框上，横向逐渐逐渐拖动缩放IE的窗口——不用多说，很多朋友肯定早已明白这当中的原由，这里啰嗦一下主要是针对一些不太明白的新人，老人就忽略这段吧简单说一下：
上例中设定的#d的百分比宽度为80%，那么这个宽度自然会随着IE窗口大小的改变而改变，假如调整后的IE窗口为999，那么这时这个#d的实际宽度为 792，这个宽度自然不能被#d li的节点数整除，也就是20%宽度不为整数（浏览器显示的最小单位是1象素，不能再分了，可能是四舍五入），很自然就会出现#d li的宽度和大于#d的实际宽度而导致折行现象了。

天哪！差点忘了，上面#d li定义了 border为1px，则#d li的宽度总和为100% 10px了，赶紧去掉再试试——这回似乎可以了，再也没有出现上面的现象，IE似乎没有对#d li的实际宽度进行四舍五入算法。难道这里就不能再额外设定#d li的 border和padding了吗？
这还不算，最糟糕的是：
假如#d li的节点数为3/7/9/11……等等根本不能均分#d宽度的值，你又得分别设定每个#d li的百分比，使它们的总和等于100%了。而且依旧不能再额外设定#d li的border和padding

另外：在#d的宽度为固定尺寸下，设定的#d li为百分比时，有时也会出现一些你不想看见的问题，相信很多朋友也碰到过。不了解的可以自己试试。