分享
 
 
 

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

王朝other·作者佚名  2006-12-16
窄屏简体版  字體: |||超大  

所周知,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"><!--

*{ 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>

IE不支持该效果,FF和OPERA下看看。

上面的示例分别定义了

#d{

display:table;

}

#d ul{

display:table-row-group;

}

#d li{

display:table-cell;

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

<tabel>

<tr>

<td>标签,这样上面第一个示例里的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"><!--

*{ margin:0px; padding:0px;}#d

{ display:table; margin:0

auto; background:#0cf; padding:10px; width:799px; borde

r: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/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"><!--

*{ margin:0px; padding:0px;}body{ text-

align:center;}#d{ display:table; margin:0

auto; background:#0cf; padding:10px; width:799px; borde

r: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>

这里定义了#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"><!--

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

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有