解决inline-block上下不对齐

简介: 一开始都是行内元素,但是左边按钮和右边标题就是对不齐,于是,设置左边按钮float:left就可以了。 快乐成长的小太阳 .

一开始都是行内元素,但是左边按钮和右边标题就是对不齐,于是,设置左边按钮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;
}

 

 

目录
相关文章
|
2月前
|
前端开发
去除 inline-block 元素间间距的方法
去除 inline-block 元素间间距的方法
|
3月前
行内元素有哪些?块级元素有哪些?空(void)元素有哪些?inline与inline-block的区别
行内元素有哪些?块级元素有哪些?空(void)元素有哪些?inline与inline-block的区别
25 0
|
4月前
display:block小技巧
display:block小技巧
24 0
block、inline、inline-block的区别
block、inline、inline-block的区别
|
8月前
display: block 属性影响flex布局
display: block 属性影响flex布局
|
9月前
|
前端开发 容器
【前端】一文读懂display: inline-block
【前端】一文读懂display: inline-block
262 2
|
11月前
|
前端开发 容器
CSS: inline、block和inline-block的区别
CSS: inline、block和inline-block的区别
|
前端开发
【前端】display:inline-block中间的间隙
【前端】display:inline-block中间的间隙
78 0
【前端】display:inline-block中间的间隙