How do I keep a background image bullet aligned with the first line of a wrapped list item?

问题

I am using background images as bullets.

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>

These work fine as long as the list item text doesn't wrap. The last line wraps and the image bullet drops down and sits between the two wrapped lines. I'd like it to sit next to the top line.

How do I do that? Thanks.

回答1:

Instead of using percentage as the vertical background position (50%), set a fixed background position - 6px.

btw - you can compact the CSS by assigning most properties to a base list item class (.follow) instead of repeating them for each list item.

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>

来源：https://stackoverflow.com/questions/45902141/how-do-i-keep-a-background-image-bullet-aligned-with-the-first-line-of-a-wrapped

标签

html

css

background-image

bulletedlist