今天使用inline-block想在一个div里上下排列两个p元素,都是怎么排都不对。
如图:
具体的H5代码:
<div class="modify-rank-install">
<ul>
<li class="modify-rank-install-big"><div><p>KKKKKK</p>
<p style="font-size: 1.2rem;line-height: 1.8rem">kkkkk</p></div></li>
</ul>
</div>
CSS代码:
.modify-rank-install{
padding: 0 1rem;
background: #ffffff;
border-radius: 14px;
margin-top: 1rem;
}
.modify-rank-install li{
border-bottom: 1px solid #E0E0E0;
height: 5.5rem;
line-height: 5.5rem;
}
.modify-rank-install li.modify-rank-install-big{
height: 7.6rem;
}
.modify-rank-install li.modify-rank-install-big div{
display: inline-block;
height: 7.6rem;
line-height: 7.6rem;
border-color: black;
border-width: 1px;
border-style: solid;
}
.modify-rank-install li.modify-rank-install-big div p{
height: 3.8rem;
line-height: 5.5rem;
border-color: red;
border-width: 1px;
border-style: solid;
}
后来看了大手的方法,其实很简单,在CSS里加一句
* {margin: 0;padding: 0;box-sizing:border-box;}
然后就可以了。