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

时间:2015-3-28 1:51:45   作者:互联网   来源:互联网转载   阅读:198   评论:0
内容摘要: 众所周知FF和OPERA即其它遵循CSS标准的浏览器由于版本的不断改进早就支持:  display:table  dispaly:tablecell  dispaly:tablerow  dispaly:tablerow group  dispaly:tablecolumn  dispaly:tablecolumng...

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

  display:table

  dispaly:tablecell

  dispaly:tablerow

  dispaly:tablerow group

  dispaly:tablecolumn

  dispaly:tablecolumngroup

  等属性

  至少是 FFOPERA就能支持了之前的就不太清楚了)那还犹豫什么?开始动手吧


<!DOCTYPE html PUBLIC //WC//DTD XHTML Transitional//EN
transitionaldtd><html xmlns=><head><meta httpequiv=ContentType content=text/html; charset=gb
/><title>Normal</title><style type=text/css><!
*{ margin:px; padding:px;}#d
{ display:table; margin:
auto; background:#cf; padding:px; width:%; border:
px solid #f;}#d ul{ display:tablerowgroup;}#d li
{ display:tablecell; liststyle:none; border:px solid
#; background:red; textalign: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>

  上面的示例分别定义了
#d{
       display:table;

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

  <!DOCTYPE html PUBLIC //WC//DTD XHTML Transitional//EN
transitionaldtd><html xmlns=><head><meta httpequiv=ContentType content=text/html; charset=gb
/><title>Normal</title><style type=text/css><!
*{ margin:px; padding:px;}#d
{ display:table; margin:
auto; background:#cf; padding:px; width:px; borde
r:px solid #f;}#d ul{ display:tablerowgroup;}#d li
{ display:tablecell; liststyle:none; border:px solid
#; background:red; textalign: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=documentgetElementById(d);var c=dgetElementsByTagName(li);var
l=clength;for(var i=;i<l;i++)alert(c[i]offsetWidth)
</script></body></html>

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

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

  <!DOCTYPE html PUBLIC //WC//DTD XHTML Transitional//EN
transitionaldtd><html xmlns=><head><meta httpequiv=ContentType content=text/html; charset=gb
/><title>Normal</title><style type=text/css><!
*{ margin:px; padding:px;}body{ text
align:center;}#d{ display:table; margin:
auto; background:#cf; padding:px; width:px; borde
r:px solid #f;}#d ul{ display:tablerowgroup;}#d li
{ display:tablecell; list
style:none; _float:left; width:px; border:px solid
#; background:red; textalign: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>

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

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

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

这不算很麻烦我的数学还不至于那么差劲——也许你会说
但真正麻烦的是当我们在做一个按百分比来进行页面及横向导航的设计时这些#d li的宽度又该如何设定呢?还是实例为王下面只是对上面的示例做个小小的改动还好是个#d li节点正好每个宽度是<!DOCTYPE html PUBLIC //WC//DTD XHTML Transitional//EN
transitionaldtd><html xmlns=><head><meta httpequiv=ContentType content=text/html; charset=gb
/><title>Normal</title><style type=text/css><!
*{ margin:px; padding:px;}body{ text
align:center;}#d{ display:table; margin:
auto; background:#cf; padding:px; width:%; border:
px solid #f;}#d ul{ display:tablerowgroup;}#d li
{ display:tablecell; list
style:none; _float:left; width:%; border:px solid
#; background:red; textalign: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的百分比宽度为%那么这个宽度自然会随着IE窗口大小的改变而改变如果调整后的IE窗口为那么这时这个#d的实际宽度为 这个宽度自然不能被#d li的节点数整除也就是%宽度不为整数(浏览器显示的最小单位是象素不能再分了可能是四舍五入)很自然就会出现#d li的宽度和大于#d的实际宽度而导致折行现象了

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

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


标签:横向 排列 适应 宽度 问题 

免责申明:

站内素材文件均整理自互联网,仅供个人学习参考使用,请勿用于商业用途,如您喜欢请购买正版

站内资源除部分为本站原创外皆由网上搜集和整理,若无意中侵犯到您的权利,敬请告之(QQ:2390986128)敬请告之,我们将在48小时内删除。知识产权声明】【★下载说明★】

全站地图