如何让两个块级元素显示在同一行:
在项目中我们有时会使用display:inline-block使两个div显示在同一行,当然也有其他方法使div显示在同一行。
问题描述
当使用display:inline-block时,在chorme浏览器中,两个盒子会产生一定像素的间隙,如下图:
<style>
.inner{
height: 100px;
width: 50px;
border: 1px solid #D7D7D7;
background-color:#F0F0F0;
display: inline-block;
}
.first_inner{
height: 100px;
width: 500px;
display: inline-block;
border: 1px solid #D7D7D7;
vertical-align: bottom;
}
</style>
<div>
<div class="inner">
<img src="./img/3.1素材.png" alt="">
</div>
<div class="first_inner">
<span></span>
<p></p>
</div>
</div>
原因分析:
例如:换行和空格会占据一定的位置使之产生一定的间隙
解决方案:
这里小的改动就是使第二个div和上一个div的代码写在同一行
修改后的代码如下:
<div>
<div class="inner">
<img src="./img/3.1素材.png" alt="">
</div><div class="first_inner">
<span></span>
<p></p>
</div>
</div>
修改后的效果如下: