|
今天群里工友提了一個需求，讓固定寬度的子元素，在不確定寬度的容器內(nèi)水平居中（自適應(yīng)）：UL 寬度不固定；LI 寬度固定，LI 是一個塊�？雌饋磉�挺簡單的。但大家為什么一直討論不斷。奇怪，實現(xiàn)了一下。發(fā)現(xiàn)其實還是很簡單的。還是沒有超出原來的解決方案，即使用 display:inline-block。實際要實現(xiàn)的效果應(yīng)該是下面這個樣子：
而事實上，這并不是簡單的事。作為樣式方面的主導(dǎo)者開發(fā)者，職責(zé)就是去解決這樣的問題。那么寫 Demo 吧。如果這個解決方案搞定了，那么，我們將可以輕易地做到，讓不固定個數(shù)的子元素相對于窗口自適應(yīng)居中。比如這樣的導(dǎo)航，無論子元素是多少，都會自適應(yīng)居中：
最終效果：UL寬度自適應(yīng)水平居中好吧。
說一下實現(xiàn)的重點。如果子元素不是固定的話，我們通常的實現(xiàn)方法是利用來 display:inline-block 解決，在 IE6 ～ 7 中使用 display:inline 但要讓這個元素?fù)碛?layout，通常我們是添加 zoom:1; 來實現(xiàn)。這樣，大概代碼會是這樣的：
#test{display:block;text-align:center;}
#test li{display:inline-block;*display:inline;*zoom:1;width...
但這個子元素需要是塊狀的，有時候就會現(xiàn)出高低不平的現(xiàn)象，這很好解決，用加上一句：
#test{display:block;text-align:center;}
#test li{
display:inline-block;*display:inline;*zoom:1;
/* 解決不能水平對齊問題 */
vertical-align:top;
}
好吧，現(xiàn)在能運行了。樣子還不錯，IE 下面已經(jīng)可以達(dá)到我們要求的效果了。但，F(xiàn)irefox 等高級瀏覽器竟然出現(xiàn)了間隙，如下圖：
出處：幸福收藏夾
責(zé)任編輯：bluehearts
上一頁 下一頁 讓不固定個數(shù)的子元素自適應(yīng)居中 [2]
◎進(jìn)入論壇網(wǎng)絡(luò)編程版塊參加討論
|
第 1 頁 讓不固定個數(shù)的子元素自適應(yīng)居中 [1]
第 2 頁 
