移動端行列布局

最近發現UC下通過display:inline-block布局有點問題，全用最新版：Android6系統和最新版UC手機瀏覽器都還是有問題。

 

設計需求： 導航欄100%寬度，共有4個子欄目，每一個欄目占1/4寬度。

HTML代碼為：

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

 

方法一： 通過"display: inline-block;"來布局，這里通過父元素設置"font-size: 0;"消除子元素inline-block的默認間距。

ul{ width: 100%; font-size: 0;          
} li{ display: inline-block; width: 25%;
 height: 100px;    
}

 

結果就是手機瀏覽器表現都很好，除了UC瀏覽器(下圖左為正常瀏覽器，右為UC瀏覽器)：

                  

看來設置父元素"font-size: 0"在UC下並不能消除掉子元素inline-block的默認間距。

那下面就換一種消除間距的方法——改變HTML標簽的寫法。

 

方法二：HTML結束標簽和開始標簽之間不留空

<ul>
  <li></li ><li></li ><li></li ><li></li>
</ul>

或者：

<ul>
  <li>
  </li><li>
  </li><li>
  </li><li>
  </li>
</ul>

看起來很怪，目的就是為了從根源上消除HTML空格，那么默認間距也就沒有了。

 

方法三：不用inline-block，用float

ul{ list-style: none; width: 100%;
} li{ float: left; width: 25%; height: 100px;
}

這種方法UC下表現正常。

 

方法四：使用box/flex布局

ul{ list-style: none; display: -webkit-box;
} li{ -webkit-box-flex: 1; height: 100px;
}

這樣子包括UC在內表現都正常。不過畢竟-webkit-box是老式語法，好像有點落后。那就用新的flex吧：

ul { width: 100%; list-style: none; display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row;

} li{ -webkit-flex-grow: 1; flex-grow: 1; height: 100px;
}

以上代碼運行截屏如下（左為正常瀏覽器，右為UC瀏覽器）：

            

 

結果發現安卓機的UC又不行了，都已經顯式聲明為橫着排列，UC還是打豎的。

 

因此還是用-webkit-box吧，又或者-webkit-box和flex一起用，這樣都是表現正常的：

ul { width: 100%; list-style: none; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row;
}
li{ -webkit-box-flex: 1; -webkit-flex-grow: 1; flex-grow: 1; height: 100px;
}

 

方法五：表格布局

ul{ display: table; width: 100%;
} li{ display: table-cell; width: 25%; height: 100px;
}

 

方法六：

　　絕對定位（=.=）

 

總結： 安卓UC手機瀏覽器對於父元素使用"font-size: 0;"來消除子元素的inline-block的默認間距不起作用，而且對flex支持不好。在正式應用中應考慮兼容的方案。