解决inline-block上下不对齐

时间:2023-01-23 15:40:41

一开始都是行内元素,但是左边按钮和右边标题就是对不齐,于是,设置左边按钮float:left就可以了。

 <header class="right-header">
<a href="#" class="tabCourse active">
<span class="icon-png icon-prev"></span>
</a>
<a href="#" class="tabCourse">
<span class="icon-png icon-next"></span>
</a>
<a href="#" class="refresh active">
<span class="icon-png icon-myrefresh"></span>
</a>
<span class="title">
快乐成长的小太阳
</span>
</header>
.right-header>a {
float: left;
display: inline-block;
padding: 23px 20px;
} .title {
display: inline-block;
border-left: 1px solid #CADFEA;
font-size: 24px;
color: #5E97B3;
padding: 17px;
}

解决inline-block上下不对齐