众所周知，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就能支持了，之前的就不太清楚了)那还犹豫什么?开始动手吧
<!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>
上面的示例分别定义了
#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"><!--
*{ 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
如果您对本文有任何疑问或者建议，请到讨论区发表您的意见:
>>
论坛入口 <<
上一篇：
滚动字幕制作手册 下一篇：
用css模仿AS效果的导航菜单
【文章评论】
【收藏本文】
【推荐好友】
【打印本文】
【我要投稿】 【论坛讨论】
