html5 - 坐等大神赐教，H5中iPhone宽度够，安卓不够？

Question

在APP的布局中，出现iPhone中宽度合适，但在安卓中宽度不够，元素被挤到下一行的问题；如下图：图片描述

用到的代码是：

.dls{

width:100%;
height:2.1rem;
font-size:0;
dl{
    display:inline-block;
    width:25%;
    height:100%;
    text-align:center;    
}

}

Answer 1

display：inline-block的元素之间会有一个字符的间隙，这个间隙导致了最后一个会掉下来。

解决方法：
1、给父元素设置font-size：0px；
2、取消掉换行符，如这样：<span>aaaa</span><span>aaaa</span><span>aaaa</span>连续。

或者

<p class="space">
    <a href="##">惆怅</a><!--
    --><a href="##">淡定</a><!--
    --><a href="##">热血</a>
</p>

<p class="space">
    <a href="##">惆怅</a
    ><a href="##">淡定</a
    ><a href="##">热血</a>
</p>

3、使用margin负值。
4、使用浮动。
5、另外还有使用letter-spacing、word-spacing等方法。

Answer 2

给dl的父元素设置font-size: 0; 然后再给dl设置字号
原因是display： inline-block的元素之间存在空隙

Answer 3

试试用flex 布局

Answer 4

谢谢各位大神，该问题已解决，谢谢@whhlu！两种方法都可以：《1》1、给父元素设置font-size：0px；
2、取消掉换行符，如这样：<span>aaaa</span><span>aaaa</span><span>aaaa</span>连续。
《2》用弹性盒，flex,如页面中不想用太多弹性盒，可以采用第一种办法！