使用字体图标缩进列表项
使用字体图标缩进列表项
提问于 2016-11-29 15:54:44
我正在尝试让我的列表项带有可爱的图标，如下所示：
但目前，它们看起来是这样的：
下面是我的HTML：
<section id="black-studio-tinymce-6" class="widget widget_black_studio_tinymce">
<h2 class="widget-title">Contact Us</h2>
<div class="textwidget">
<ul>
<li>021 552 1187</li>
<li>info@powersol.co.za</li>
<li>Unit S19 Spearhead Business Park<br>
cnr Montague Drive & Freedom Way<br>
Montagu Gardens<br>
Cape Town, South Africa</li>
</ul>
</div>
</section>下面是我的风格：
section#black-studio-tinymce-6 div.textwidget ul {
list-style: none;
padding-left: 0;
margin: 0;
li {
&:first-child:before {
@extend .font-awesome-footer;
content: '\f095';
}
&:nth-child(2):before {
@extend .font-awesome-footer;
content: '\f003';
}
&:last-child:before {
@extend .font-awesome-footer;
content: '\f041';
}
}
}如图所示，如何在漂亮的链接后缩进内容？希望你能帮上忙。
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-11-29 15:59:04
这很容易解决：
在列表项中添加一些填充，并将图标绝对放置在填充区域中。
li {
padding-left: 40px;
position: relative;
&::before {
display: inline-block;
position: absolute;
left: 0;
}
}Stack Overflow用户
发布于 2016-11-29 16:00:26
你可以使用since left : 10px；但这不会起作用，因为左边的图标都有不同的长度，所以对每个孩子都这样做：
margin-right: 800px;更改最适合您的800px
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40860490
复制相关文章
相似问题