中国和阿曼足球直播时间/法国球员/k联赛/体球网足球即时比分 - 丹东一句定三码牛彩网

讓不固定個數的子元素自適應居中
作 者：天驕科技  發表時間：2012-09-14 02:50:34

今天工友提了一個需求，讓固定寬度的子元素，在不確定寬度的容器內水平居中（自適應）：UL 寬度不固定；LI 寬度固定，LI 是一個塊。看起來還挺簡單的。但大家為什么一直討論不斷。奇怪，實現了一下。發現其實還是很簡單的。還是沒有超出原來的解決方案，即使用 display:inline-block。實際要實現的效果應該是下面這個樣子：

而事實上，這并不是簡單的事。作為樣式方面的主導者開發者，職責就是去解決這樣的問題。那么寫 Demo 吧。如果這個解決方案搞定了，那么，我們將可以輕易地做到，讓不固定個數的子元素相對于窗口自適應居中。比如這樣的導航，無論子元素是多少，都會自適應居中：

最終效果：UL寬度自適應水平居中

說一下實現的重點。如果子元素不是固定的話，我們通常的實現方法是利用來 display:inline-block 解決，在 IE6 ～ 7 中使用 display:inline 但要讓這個元素擁有 layout，通常我們是添加 zoom:1; 來實現。這樣，大概代碼會是這樣的：

以下為引用的內容：

#test{display:block;text-align:center;}
#test li{display:inline-block;*display:inline;*zoom:1;width...

但這個子元素需要是塊狀的，有時候就會現出高低不平的現象，這很好解決，用加上一句：

以下為引用的內容：

#test{display:block;text-align:center;}
#test li{
    display:inline-block;*display:inline;*zoom:1;

    /* 解決不能水平對齊問題 */
    vertical-align:top;
}

好吧，現在能運行了。樣子還不錯，IE 下面已經可以達到我們要求的效果了。但，Firefox 等高級瀏覽器竟然出現了間隙，如下圖：

真正要憂傷的東西來了。這是一個正常現象，只要用 display:inline-block 就會有這樣的問題。因為 IE6~7 并不完全支持這個屬性，所以不存在這樣的問題。好吧，好像是因為空白引起的。如果把所有空白都刪除了就沒問題了。但這始終不是什么好辦法。我們的解決方法是（多謝@鴿子一起解決這個問題）：

以下為引用的內容：

@media screen and (-webkit-min-device-pixel-ratio:0){
    #test{
        /* 讓 chrome 支持 12px 以下的字體 */
        -webkit-text-size-adjust:none;
    }
 }

但是，問題是這個糾結的瀏覽器，竟然不認 font-size:0 這樣的寫法。還好經測試，幸運的是 font-size:1px 它認識，而且效果剛好是我們想要的：沒有間隙。最終的代碼是：

以下為引用的內容：

#test{
    display:block;text-align:center;

    /* 解決間隙問題 */
    font-size:0;
}
#test li{
    display:inline-block;*display:inline;*zoom:1;

    /* 解決不能水平對齊問題 */
    vertical-align:top;

    /* 解決間隙問題后遺癥解決 */
    font-size:13px;
}

/* 讓 chrome 支持 12px 以下的字體 */
@media screen and (-webkit-min-device-pixel-ratio:0){
    #test{-webkit-text-size-adjust:none;font-size:1px;}
}

好久沒寫 CSS 了。在想，如果有天我開始記憶力不好，忘記 CSS 是怎么寫的，怎么辦？會不會像《Boston Legal》的 Deny Crane 一樣抓狂。

UPDATE： 2011.1.25 21:15

避免了 hack：

以下為引用的內容：

ul{ float: left;
    left: 50%;
    position: relative;
}
li{
    float: left;
    position: relative;
    right: 50%;
}