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

2022-07-15 80酷酷网 80kuku.com

　　问题|自适应

　　众所周知，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 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"></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不支持该效果，FF和OPERA下看看。

上面的示例分别定义了

#d{
       display:table;
}
#d ul{
       display:table-row-group;
}
#d li{
       display:table-cell;
}

那么它们在CSS2的样式里表现就分别相当于表格的

标签，这样上面第一个示例里的5个 <li>就自然的被均分横向排列在#b和#b ul里，一切都很正常，表格都是这么解释的。然而，细心的朋友又会想到另一个问题，当#d的宽度不能被所包含的#d li的节点数整除，#d li的宽度又是如何均分#d的宽度呢？它在浏览器下宽度尺寸又是如何表现的呢？为了说明问题，重新定义一个不被#d li的节点数整除的#d的宽度，这里任意给个799px，在FF/opera下测试看看:

<!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"></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/javascript">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>

这个在IE下就不用测试了，我也没加非IE的判定，偷了个懒。

既然FF和OPERA都基于上述原理来解释这种类似表格的样式，IE又不支持，何不为其设定一个相同的解释机制呢？
我们先来看看IE下我们所能做作的：

<!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"></style></head><body><div id="d"> <ul> <li>aaa</li> <li>aaa</li> <li>aaa</li> <li>aaa</li> <li </ul></div></body></html>

这里定义了#d li向左浮动，也分别定义了它们的宽度（注：这里因为设定了其border为1px，宽度就是158px了）。为了防止FF/OPERA识别浮动，用了_float:left;

OK——这回可以在IE下测试了——相当完美！当然FF/OPERA下当然也一样到此，如果你认为问题解决了，并且你平时也是这么做的——那么你现在可以关闭这个话题了，该忙什么就忙什么吧！

然而，问题是当我们的设定#d的宽度为798px呢？——那再给倒数第二个#d li加个样式来设定宽度width:157px不就得了？那如果再重新设定#d的宽度为797px、796px……呢？（也许你设计完成一个页面后再也不会动这些宽度尺寸了）但再麻烦点的是如果#d li的节点数需要调整了——表现为我们在日常的网站开发和维护中往往会增加或减少这种导航列表栏目，是否还要重新计算和分别设定这些#d li的宽度呢？

这不算很麻烦，我的数学还不至于那么差劲——也许你会说。
但真正麻烦的是：当我们在做一个按百分比来进行页面及横向导航的设计时，这些#d li的宽度又该如何设定呢？还是实例为王，下面只是对上面的示例做个小小的改动，还好是5个#d li节点，正好每个宽度是20％：

<!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"></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为百分比时，有时也会出现一些你不想看见的问题，相信很多朋友也遇到过。不了解的可以自己试试。