标签：
问题背景：移动端编程里面的左右按钮布局，没有用表布局，而用了浮动（为了让2个各占一半宽度的按钮排列在一行），由于浮动元素脱离了原本的文档流，导致父元素（块元素）所占高度为0，当父元素的display属性设置成内联块inline-block时，惊奇的发现它能占用浮动元素的高度了，但是用了一段时间之后发现它有个缺点，就是底部多出一部分空隙，不知道怎么干掉，而这两个按钮恰好要放到底部，不允许下面还有空隙，代码如下。
<style type="text/css"> .box1 { border: 1px solid red; width: 100%; } .box2 { box-sizing:border-box; border: 1px solid; display: inline-block; width: 100%; } span { width: 50%; background-color: #ddd; display: inline-block; text-align:center; padding:0.5em 0; float:left; } </style> <div class="box1"> <div class="box2"> <span>确定</span> <span>取消</span> </div> </div>
效果如下图：
在百度上一搜，倒是有解决方案，但是没有一个能用。什么去掉换行空格啦（试过好多次，不行），设置字体大小为0啊（公司的电脑上没有成功，在家里试发现是可以的），设置margin偏移啊（鄙视这种做法，不采纳），空隙仍然在那里。最后还是功夫不负有心人，另外一篇文章里面说到可以设置vertical-align为top，这个试了可行。
所以修正代码如下：
<style type="text/css"> .box1 { border: 1px solid red; width: 100%; } .box2 { box-sizing:border-box; border: 1px solid; display: inline-block; width: 100%; vertical-align: top; /* 经过尝试发现设置成其他的值也可以消除间隙，只要设置了vertical-align */ } span { width: 50%; background-color: #ddd; display: inline-block; text-align:center; padding:0.5em 0; float:left; } </style> <div class="box1"> <div class="box2"> <span>确定</span> <span>取消</span> </div> </div>
加上回家之后发现font-size设置为0的方案是可行的，所以第二种修正代码如下：
<style type="text/css"> .box1 { border: 1px solid red; width: 100%; font-size: 0; /* 设置成0 */ } .box2 { box-sizing:border-box; border: 1px solid; display: inline-block; width: 100%; font-size: 16px; /* 覆盖掉父元素的配置 */ } span { width: 50%; background-color: #ddd; display: inline-block; text-align:center; padding:0.5em 0; float:left; } </style> <div class="box1"> <div class="box2"> <span>确定</span> <span>取消</span> </div> </div>
第二种方案是不理想的，不能继承全局的字体大小，所以第一种更优。
之前还搜到一个网友的方法，把内联块儿浮动之后可以消除间隙，这个是可行，但是浮动之后又变成不占用高度空间了，又得把父元素弄成内联块，这样就死循环了。
标签：
原文地址：http://www.cnblogs.com/omega8/p/4818072.html
