首页  韩国资源  酷站加油  我的展厅  设计名站  古典元素  推荐下载  设计欣赏  每周专访  招募精英  人才专区  网页教程  平面设计  编程开发  设计竞赛
当前位置:首页 > 网页教程 > 网站重构教程 > 正文
Google
Li的横向排列自适应宽度问题
来源:蓝色理想 作者:zbm2001z 2006年10月11日 16:42 网友评论:0条 点击:

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

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

测试好像也很不错,似乎没什么不如意的地方(可能在有些机器上会折行)。再调整一下分辨率看看 ——还是挺好的啊(可能在有些机器上会折行)!那么你在试试缩小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为百分比时,有时也会出现一些你不想看见的问题,相信很多朋友也遇到过。不了解的可以自己试试。

首页 上一页 [1] [2] [3] [4] 下一页 尾页
上一篇:谁在意什么标准   下一篇:组合CLASS来完成网页布局风格
收藏此页】【打印】【关闭
 相关文章  我要点评

免责声明:本站刊载此文不代表同意其说法或描述,仅为提供更多信息,也不构成任何建议。对本文有任何异议,请联络:68design#163.com
转载要求:作者及来源信息必需保留。转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印。



关于我们 | 在线反馈 | 广告报价 | 友情链接 | 联系我们 | 免责声明 | 在线投稿 | 网站地图
Copyright © 2003-2007 68design.net, All Rights Reserve 【找网页设计师,当然上网页设计师联盟】