我使用背景图像作为项目符号。
ul.follow-background li.facebookicon {
list-style:none outside !important;
background: url('/wp-content/uploads/facebook-icon-16x16.png') no-repeat left 50%;
line-height: 30px;
margin: 0.3em 0 0 -0.7em;
padding: 0 0 0 1.5em;
}
ul.follow-background li.twittericon {
list-style:none outside !important;
background: url('/wp-content/uploads/twitter.gif') no-repeat left 50%;
line-height: 30px;
margin: 0.3em 0 0 -0.7em;
padding: 0 0 0 1.5em;
}
ul.follow-background li.blacksquareicon {
list-style:none outside !important;
background: url('/wp-content/uploads/black-square-16x16.png') no-repeat left 50%;
line-height: 30px;
margin: 0.3em 0 0 -0.6em;
padding: 0 0 0 1.6em;
}
HTML
<p>Connect with us through our social media accounts.</p>
<ul class="follow-background">
<li class="facebookicon"><a href="https://www.facebook.com/baeeorg" rel="nofollow">Facebook</a></li>
<li class="twittericon"><a href="https://twitter.com/BaeeArtists" rel="nofollow">Twitter</a></li>
<li class="blacksquareicon"><a href="/news/">News Announcements (subscribe to get our latest posts)</a> and ensure you know about all our events.</li>
</ul>
只要列表项文本不换行,这些就可以正常工作。最后一行换行,图像子弹下降并位于两条换行之间。我希望它坐在顶线旁边。
我怎么做?谢谢。