移动端行列布局

最近发现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支持不好。在正式应用中应考虑兼容的方案。