你的位置:首页 > 网页设计

[网页设计]移动端行列布局


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