css控制文字前的小图标具体写法
发布时间：2013-03-20 16:23:36 作者：佚名 
我要评论
我要评论文字前的小图标在一些列表展示中特别的有用，本文会介绍一些实现的此效果的具体方法，感兴趣的你可不要错过了哈，希望本教程对你有所帮助
有些列表项需要在文字前加个小图标，如下图：
实现方法有多种，这里使用<span>元素。
span标记是行元素，没有宽高，虽然可以通过display:block;来改变。但是就会造成换行。
贴代码：
<span style="padding-left:19px;background:url(a.jpg) no-repeat;">选项1</span>
<span style="padding-left:19px;background:url(a.jpg) no-repeat;">选项2</span>
<span style="padding-left:19px;background:url(a.jpg) no-repeat;">选项3</span>
<span style="padding-left:19px;background:url(a.jpg) no-repeat;">选项4</span>
这里使用了padding-left来实现这个小图标的出现，就是让文字靠右点
实现方法有多种，这里使用<span>元素。
span标记是行元素，没有宽高，虽然可以通过display:block;来改变。但是就会造成换行。
贴代码：
复制代码
代码如下:<span style="padding-left:19px;background:url(a.jpg) no-repeat;">选项1</span>
<span style="padding-left:19px;background:url(a.jpg) no-repeat;">选项2</span>
<span style="padding-left:19px;background:url(a.jpg) no-repeat;">选项3</span>
<span style="padding-left:19px;background:url(a.jpg) no-repeat;">选项4</span>
这里使用了padding-left来实现这个小图标的出现，就是让文字靠右点
相关文章
- 下面小编就为大家带来一篇css图标与文字对齐的两种实现方法。小编觉得挺不错的，现在就分享给大家，也给的大家做个参考。一起跟随小编过来看看吧2016-06-12
- 这篇文章主要介绍了Html+css实现纯文字和带图标按钮的方法，按钮有很多种外观，本文介绍了纯文字和带图标两种按钮，感兴趣的小伙伴们可以参考一下2016-02-24
这篇文章主要介绍了纯CSS实现取字符串的第一个字符实现文字图标功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参2020-05-11
最新评论