移动端行列布局

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