菜單運用li標簽橫向排列自適應寬度_Div+CSS教程

教程Tag：暫無Tag,歡迎添加,賺取U幣!

　　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):

IE不支持該效果，FF和OPERA下看看。

示例代碼 [www.ghpqjb.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>mb5u.com - 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>

上面的示例分別定義：

示例代碼 [www.ghpqjb.com]

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

那么它們在CSS2的樣式里表現就分別相當于表格的<tabel>、<tr>、<td>標簽，這樣上面第一個示例里的5個 <li>就自然的被均分橫向排列在#b和#b ul里，一切都很正常，表格都是這么解釋的。然而，細心的朋友又會想到另一個問題，當#d的寬度不能被所包含的#d li的節點數整除，#d li的寬度又是如何均分#d的寬度呢？它在瀏覽器下寬度尺寸又是如何表現的呢？為了說明問題，重新定義一個不被#d li的節點數整除的#d的寬度，這里任意給個799px，在FF/opera下測試看看：

這個在IE下就不用測試了，我也沒加非IE的判定。

示例代碼 [www.ghpqjb.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>mb5u.com - 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>

既然FF和OPERA都基于上述原理來解釋這種類似表格的樣式，IE又不支持，何不為其設定一個相同的解釋機制呢？我們先來看看IE下我們所能做作的：

示例代碼 [www.ghpqjb.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>mb5u.com - 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>
<li>aaa</li> <li
style="width:157px">aaa</li>
</ul></div></body></html>

這里定義了#d li向左浮動，也分別定義了它們的寬度（注：這里因為設定了其border為1px，寬度就是158px了）。為了防止FF/OPERA識別浮動，用了_float:left; 這回可以在IE下測試了——相當完美！當然FF/OPERA下當然也一樣到此，假如你認為問題解決了，并且你平時也是這么做的——那么你現在可以關閉這個話題了，該忙什么就忙什么吧！

然而，問題是當我們的設定#d的寬度為798px呢？——那再給倒數第二個#d li加個樣式來設定寬度width:157px不就得了？那假如再重新設定#d的寬度為797px、796px……呢？（也許你設計完成一個頁面后再也不會動這些寬度尺寸了）但再麻煩點的是假如#d li的節點數需要調整了——表現為我們在日常的網站開發和維護中往往會增加或減少這種導航列表欄目，是否還要重新計算和分別設定這些#d li的寬度呢？

這不算很麻煩，我的數學還不至于那么差勁——也許你會說。
但真正麻煩的是：當我們在做一個按百分比來進行頁面及橫向導航的設計時，這些#d li的寬度又該如何設定呢？還是實例為王，下面只是對上面的示例做個小小的改動，還好是5個#d li節點，正好每個寬度是20％：

示例代碼 [www.ghpqjb.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>mb5u.com - 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: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>

測試似乎也很不錯，似乎沒什么不如意的地方（可能在有些機器上會折行）。再調整一下分辨率看看 ——還是挺好的啊（可能在有些機器上會折行）！那么你在試試縮小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為百分比時，有時也會出現一些你不想看見的問題，相信很多朋友也碰到過。不了解的可以自己試試。