当前第2页 返回上一页
为了简单方便点,我用了a标签作为按钮的最外层
1 2 3 4 5 6 7 8 9 10 11 12 13 | <a href= "#" class = "btn_green" >
<font class = "icon_pre ficomoon icon-search" ></font>
<font class = "icon_next" >筛选</font>
</a>
.btn_green{
text-decoration:none;
display:inline-block;
color:#fff;
overflow:hidden;
vertical-align:middle;
font-size: 1em;
line-height: 1.4;
}
|
1、a标签中的line-height是用来撑高度的,如果不加会出现下面的情况:

关于line-height的原理介绍,网上有很多材料可以浏览,有必要的去了解下的。
2、overflow:hidden是用来清除浮动的。
三、按钮内容
根据效果图可以看出,按钮分为左右两部分。
左边部分如下:
1 2 3 4 5 6 7 8 | <font class = "icon_pre ficomoon icon-search" ></font>
.icon_pre{
padding:8px 15px;
border-right:1px solid #c9e7de;
background:#69bda4;
border-radius:4px 0 0 4px;
float:left
}
|
border-right显示那条分割线,其余的代码是在显示字体图标。
右边部分如下:
1 2 3 4 5 6 7 | <font class = "icon_next" >筛选</font>
.icon_next{
padding:8px 30px;
background:#69bda4;
border-radius:0 4px 4px 0;
float:left
}
|
两部分都用了float浮动,我不太喜欢用这个属性,但不用就会出现中间有很大的间隔。而且由于font是内联元素,所以padding-top和padding-bottom无效。

用了浮动后就能让font变为块级元素,使得padding有效,而且也会让两个元素紧紧的挨着,不出现间隔。
在网上有很多关于浮动原理的说明,有必要去了解下的。
以上就是css怎么给按钮加图标的详细内容,更多文章请关注木庄网络博客!
返回前面的内容
相关阅读 >>
css flex 的用途详解
css实现元素自适应屏幕大小的思路是什么
css sprite如何使用
vue中如何集成css框架?方法介绍
dedecms怎么修改css
css color属性怎么用
css怎么设置边框内颜色
css 实现三栏自适应布局
谈谈css中的混合模式
css background-size属性怎么用
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css怎么给按钮加图标