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

2006-10-12 作者:BitsCN整理来源:中国网管联盟点评 投稿 收藏

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

　　display:table 网管u家u.bitscn@com

　　dispaly:table-cell 网管联盟bitsCN_com

　　dispaly:table-row

网管联盟bitsCN@com

　　dispaly:table-row- group

网管网www_bitscn_com

　　dispaly:table-column 网管论坛bbs_bitsCN_com

　　dispaly:table-column-group 网管联盟bitsCN_com

　　等属性。中国网管联盟bitsCN.com

　　至少是 FF1.0,OPERA7就能支持了，之前的就不太清楚了)那还犹豫什么?开始动手吧网管下载dl.bitscn.com

<!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> 网管下载dl.bitscn.com
</ul></div></body></html> 网管网www.bitscn.com

网管联盟bitsCN@com

上面的示例分别定义了

#d{
       display:table;
}
#d ul{
       display:table-row-group;
}
#d li{
       display:table-cell;
}

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

<tabel> 网管u家u.bitscn@com
<tr>
<td>

标签，这样上面第一个示例里的5个 <li>就自然的被均分横向排列在#b和#b ul里，一切都很正常，表格都是这么解释的。然而，细心的朋友又会想到另一个问题，当#d的宽度不能被所包含的#d li的节点数整除，#d li的宽度又是如何均分#d的宽度呢？它在浏览器下宽度尺寸又是如何表现的呢？为了说明问题，重新定义一个不被#d li的节点数整除的#d的宽度，这里任意给个799px，在FF/opera下测试看看: 网管联盟bitsCN@com

type="text/javascript"> function Preview(obj) { var TestWin=open(''); TestWin.document.write(obj.value); } function copyCode(obj) { var rng = document.body.createTextRange(); rng.moveToElementText(obj); rng.scrollIntoView(); rng.select(); rng.execCommand("Copy"); rng.collapse(false); } function saveCode(obj) { var winname = window.open('', '_blank', 'top=10000'); winname.document.open('text/html', 'replace'); winname.document.writeln(obj.value); winname.document.execCommand('saveas','','homepage.yesky.com.htm'); winname.close(); } function addBookmark(title,url) { if (window.sidebar) { window.sidebar.addPanel(title, url,""); } else if( document.all ) { window.external.AddFavorite(url,title); } else if( window.opera && window.print ) { return true; } }

中国网管联盟bitsCN.com

/><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> 中国网管论坛bbs.bitsCN.com

这个在IE下就不用测试了，我也没加非IE的判定，偷了个懒。网管联盟bitsCN@com

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

网管联盟bitsCN_com

<!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>

中国网管联盟bitsCN.com

网管bitscn_com

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

网管u家u.bitsCN.com

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

网管bitscn_com

然而，问题是当我们的设定#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"><!--

网管网www.bitscn.com

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

中国网管联盟bitsCN.com

顶一下

TAGs：问题适应排列横向宽度 #dli #d 设定 IE liaaa/li

上一篇：取得input中部分选中(selected)的值下一篇：HTML中小meta的大作用

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

2006-10-12 作者:BitsCN整理 来源:中国网管联盟 点评 投稿 收藏

2006-10-12 作者:BitsCN整理来源:中国网管联盟点评投稿收藏