Li的横向陈列自顺应宽度效果-CSS教程-爱易网页

Li的横向陈列自顺应宽度效果

日期：2013-07-27　浏览次数：21110 次

　　众所周知，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>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

Li的横向陈列自顺应宽度效果

相关资料更多>

推荐阅读更多>