如何使背景图像项目符号与包装列表项的第一行对齐？

Question

我使用背景图片作为项目符号。

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>

只要列表项文本不换行，它们就可以正常工作。最后一行换行，图像子弹下降并位于两条换行之间。我希望它位于顶线旁边。

我该怎么做？ 谢谢。

Answer 1

不使用百分比作为垂直背景位置 (50%)，而是设置一个固定的背景位置 - 6px。

顺便说一句 - 您可以通过将大多数属性分配给基本列表项类 (.follow) 来压缩 CSS，而不是为每个列表项重复它们。

body {
  width: 400px;
}

.follow {
  list-style: none outside;
  line-height: 30px;
  background: no-repeat left 6px; /** fixed vertical position **/
  margin: 0.3em 0 0 -0.7em;
  padding: 0 0 0 1.5em;
}

.follow.facebookicon {
  background-image: url('http://lorempixel.com/16/16?1');
}

.follow.twittericon {
  background-image: url('http://lorempixel.com/16/16?2');
}

.follow.blacksquareicon {
  background-image: url('http://lorempixel.com/16/16?3');
  margin-left: -0.6em;
  padding-left: 1.6em;
}

<ul class="follow-background">
  <li class="follow facebookicon"><a href="https://www.facebook.com/baeeorg" rel="nofollow">Facebook</a></li>
  <li class="follow twittericon"><a href="https://twitter.com/BaeeArtists" rel="nofollow">Twitter</a></li>
  <li class="follow blacksquareicon"><a href="/news/">News Announcements (subscribe to get our latest posts)</a> and ensure you know about all our events.</li>
</ul>