如何保持从背景图像项目符号开始的列表项文本？

我需要一些帮助来弄清楚如何让列表项文本不在背景图像项目符号上开始。这里是我的代码：如何保持从背景图像项目符号开始的列表项文本？

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>

对于如何工作的我的网页上，请参阅“BAEE的社交媒体连接”上https://botanical-art.baeecorp.org/about-us/#more-12

节中的代码是基于在@Ori Drori回答我的问题“How do I keep a background image bullet aligned with the first line of a wrapped list item?”

来源

2017-08-28 Cynthia A Lockley

要做到这一点，你是正确的增加填充左边的值.follow元素。但是，这是一个特殊性问题 - 因为网站上的另一个元素.site-main ul li正在获取填充值，并且.site-main ul li比.follow更具体，因此填充值将覆盖您的值.follow。

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

试试这个，让我知道它是否不能解决你的问题，或者如果我的解释不清楚。谢谢！

来源

2017-08-28 22:41:34

谢谢！这是完美的。请参阅[link]上的“BAEE的社交媒体连接”部分https://botanical-art.baeecorp.org/about-us/#more-12 [/ link] –

如何保持从背景图像项目符号开始的列表项文本？

回答

相关问题