移動端行列布局

標籤：

最近發現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還是打豎的。

 

所以可以用-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;}

 

方法六：

　　絕對位置（=.=）

 

總結： 對於父元素使用"font-size: 0;"來消除子項目的inline-block的預設間距不起作用，而且對flex支援不好。在正式應用中應考慮相容的方案。

 

 

 

 

 

 

移動端行列布局