如何防止列表项文本从背景图像项目符号的顶部开始？

Question

我需要一些帮助来弄清楚如何让列表项文本不在背景图片项目符号的顶部开始。这是我的代码：

ul.follow-background {
    list-style: none outside;
    margin: 0 0 0 0.6em;
    padding: 0 0 0 0.6em;
}

.follow {
    list-style: none outside !important;
    line-height: 30px;
    background: no-repeat left 7px; /** fixed vertical position **/
    margin: 0.3em 0 0 -0.6em;
    padding: 0 0 0 1.7em;
    overflow: hidden;
}

.follow.blacksquareicon {
    background-image: url('https://botanical-art.baeecorp.org/wp-content/uploads/black-square-16x16.png');
}

.follow.facebookicon {
    background-image: url('https://botanical-art.baeecorp.org/wp-content/uploads/facebook-icon-16x16.png')
}

.follow.flickricon {
    background-image: url('https://botanical-art.baeecorp.org/wp-content/uploads/fluid-flickr-logo-16x16.png');
}

.follow.linkedinicon {
    background-image: url('https://botanical-art.baeecorp.org/wp-content/uploads/in.jpg');
}

.follow.pinteresticon {
    background-image: url('https://botanical-art.baeecorp.org/wp-content/uploads/pinterest-logo-16x16.png');
}

.follow.rssicon {
    background-image: url('https://botanical-art.baeecorp.org/wp-content/uploads/rss.png');
}

.follow.twittericon {
    background-image: url('https://botanical-art.baeecorp.org/wp-content/uploads/twitter.gif');
}

这里是 HTML:

<ul class="follow-background">
    <li class="follow facebookicon"><a href="https://www.facebook.com/baeeorg" rel="nofollow">Facebook</a></li>
    <li class="follow flickricon"><a href="https://www.flickr.com/photos/baee/" rel="nofollow">Flickr Photo Albums</a></li>
    <li class="follow pinteresticon"><a href="https://www.pinterest.com/baee0196/" rel="nofollow">Pinterest</a></li>
    <li class="follow twittericon"><a href="https://twitter.com/BaeeArtists" rel="nofollow">Twitter</a></li>
    <li class="follow blacksquareicon"><a href="https://botanical-art.baeecorp.org/news/" rel="nofollow">News Announcements (subscribe to get our latest posts)</a></li>
</ul>

有关我页面上的工作原理，请参阅 https://botanical-art.baeecorp.org/about-us/#more-12

上的 "BAEE's Social Media Connections" 部分

代码基于@Ori Drori 对我的问题“”

的回答

Answer 1

为此，增加 .follow 元素的 padding-left 值是正确的。然而，这是一个特异性问题——因为网站上的另一个元素 .site-main ul li 正在获取填充值，而 .site-main ul li 比 .follow 更具体，填充值会覆盖您的.follow 的值。

为了解决这个问题，您可以将 .follow 选择器更新为更具体，即 .follow-background .follow。

试一试，如果它不能解决您的问题，或者我的解释不清楚，请告诉我。谢谢！

如何防止列表项文本从背景图像项目符号的顶部开始？

How do I keep the list item text from starting on top of the background image bullet?

html

css

background-image

bulletedlist