html代码
<li>
<span class="left_item">在线</span>
<img class="right_item item_img" src="../../assets/admin/image/ztree_forbid.png" alt=""/>
</li>
相关css
.left_item {
width: 30%;
height: 100%;
display: inline-block;
box-sizing: border-box;
vertical-align: middle;
}
.right_item {
width: 40%;
height: 100%;
display: inline-block;
box-sizing: border-box;
vertical-align: middle;
}
.item_img{
width: 40px;
height: 40px;
}
li {
padding: 5px 10px;
width: 100%;
vertical-align: middle;
box-sizing: border-box;
display: block;
}
重点在于:整的li与li中的左右两个item都用:
vertical-align: middle;