Li的橫向排列自適應寬度問題

來源:互聯網
上載者:User
問題|自適應

  眾所周知,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"><!--*{ 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>
運行代碼複製代碼另存代碼收藏本頁 IE不支援該效果,FF和OPERA下看看。

上面的樣本分別定義了

#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下測試看看:

<!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; 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><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>
運行代碼複製代碼另存代碼收藏本頁

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

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

<!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; border: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; 

OK——這回可以在IE下測試了——相當完美!當然FF/OPERA下當然也一樣到此,如果你認為問題解決了,並且你平時也是這麼做的——那麼你現在可以關閉這個話題了,該忙什麼就忙什麼吧!

然而,問題是當我們的設定#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"><!--*{ 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為百分比時,有時也會出現一些你不想看見的問題,相信很多朋友也遇到過。不瞭解的可以自己試試。



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。