今天工友提了乙個需求，讓固定寬度的子元素，在不確定寬度的容器內水平居中（自適應）：ul 寬度不固定；li 寬度固定，li 是乙個塊。看起來還挺簡單的。但大家為什麼一直討論不斷。希奇，實現了一下。發現實在還是很簡單的。還是沒有超出原來的解決方案，即使用 display:inline-block。實際要實現的效果應該是下面這個樣子：
而事實上，這並不是簡單的事。作為樣式方面的主導者開發者，職責就是往解決這樣的題目。那麼寫 demo 吧。假如這個解決方案搞定了，那麼，我們將可以輕易地做到，讓不固定個數的子元素相對於視窗自適應居中。比如這樣的導航，無論子元素是多少，都會自適應居中：
終極效果：ul寬度自適應水平居中
說一下實現的重點。假如子元素不是固定的話，我們通常的實現方法是利用來 display:inline-block 解決，在 ie6 ～ 7 中使用 display:inline 但要讓這個元素擁有 layout，通常我們是新增 zoom:1; 來實現。這樣，大概**會是這樣的：
以下為引用的內容：
#test
#test li
#test li
好吧，現在能執行了。樣子還不錯，ie 下面已經可以達到我們要求的效果了。但，firefox 等高階瀏覽器竟然出現了間隙，如下圖：
摘要：真正要憂傷的東西來了。這是乙個正常現象，只要用 display:inline-block 就會有這樣的題目。由於 ie6~7 並不完全支援這個屬性，所以不存在這樣的題目。好吧
真正要憂傷的東西來了。這是乙個正常現象，只要用 display:inline-block 就會有這樣的題目。由於 ie6~7 並不完全支援這個屬性，所以不存在這樣的題目。好吧，似乎是由於空缺引起的。假如把所有空缺都刪除了就沒題目了。但這始終不是什麼好辦法。我們的解決方法是（多謝@鴿子一起解決這個題目）：
以下為引用的內容：
@media screen and (-webkit-min-device-pixel-ratio:0)
}
但是，題目是這個糾結的瀏覽器，竟然不認 font-size:0 這樣的寫法。還好經測試，幸運的是 font-size:1px 它熟悉，而且效果恰好是我們想要的：沒有間隙。終極的**是：
以下為引用的內容：
#test
#test li
/* 讓 chrome 支援 12px 以下的字型 */
@media screen and (-webkit-min-device-pixel-ratio:0)
}
好久沒寫 css 了。在想，假如有天我開始記憶力不好，忘記 css 是怎麼寫的，怎麼辦？會不會像《boston legal》的 deny crane 一樣抓狂。
update： 2011.1.25 21:15
多謝 atrl 同學和justice 同學提供的更方便的方法，避免了 hack： 以下為引用的內容： ul li
justice 同學提供的更方便的方法，避免了 hack：
以下為引用的內容：
ulli
子元素定位，父元素高度自適應
現象 子元素用了position，脫離文件流，導致父元素沒有高度。解決方案 1.把子元素改成浮動布局，給父元素加上overflow屬性 overflow auto 2.在對應的子元素上，新增相同寬高的兄弟元素，該元素去掉position屬性，把定位元素的top值換成margin或padding值。b...
子元素浮動後 父元素的高度自適應
設定父元素的高度為aotu 或100 或者不設定，那麼父元素會根據子元素的高度而自動調整自身高度。栗子 div id wrap img src 1.png alt logo div id content div div css樣式 wrap content img顯示如下圖 比如給上述栗子的img新...
上下固定 不滾動 中間自適應高度布局
上下固定 不滾動 中間自適應高度布局 title meta name author content stu nicholls style type text css body html body container html container header html header footer h...