开发者社区> awbeci> 正文

解决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;
}

 

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【前端】display:inline-block中间的间隙
【前端】display:inline-block中间的间隙
34 0
display: inline-block的总结
display: inline-block的总结
19 0
去除inline-block元素间间距
根本原因:inline-block元素之间之所以有空白间距是因为空格有字体大小原因。   第一种:   把代码之间的换行空白都去掉。       例如:      第一个inline-block元素第二个inline-block元素 第二种:     把inline-block元素用一个大的div包起来,然后设置其字体大小为0即可,inline-block元素字体大小再单独设置。
795 0
display:inline-block 去除间隙
先写出代码 核心css代码: .sample0{display: inline-block;height: 40px;width: 40px;color: #ffffff;background-color: red; text-align: center;font-size: 26px;} .
755 0
去除inline-block元素间间距的N种方法
<h3 style="font-size:1.3em; padding:0px; margin:18px 0px 0px; color:rgb(51,51,51); font-family:'Lucida Grande',Verdana,Arial,sans-serif; text-align:justify"> 一、现象描述</h3> <p style="margin-top:0px
1262 0
inline函数
比如 int g(int x) { return x + x; } int f() { return g(); } 这样f会调用g,然后g返回x + x给f,然后f继续把那个值返回给调用者。
641 0
+关注
awbeci
我的名字叫张威(多好听的名字啊),毕业于哈弗大学(之前和比尔&middot;盖次是同学,自从那家伙创立了威软,我和他的关系就不太好,我发誓要打败他,然后进入安徽机电职业技术学院学习软件技术,你们觉得我会成功么), 现在在一家世界五百强公司任职UFO(想问我是什么公司?叫合肥优尔电子科技有限公司
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载