如何让背景图像项目符合包装清单项目的第一行？ [英] How do I keep a background image bullet aligned with the first line of a wrapped list item?

问题描述

  ul.follow-background li.facebookicon {
 list-风格：无外部！重要; 
 background：url（'/ wp-content / uploads / facebook-icon-16x16.png'）不重复留下50％; 
 line-height：30px; 
保证金：0.3em 0 0 -0.7em; 
填充：0 0 0 1.5em; 
} 
 
 ul.follow-background li.twittericon {
 list-style：none outside！important; 
 background：url（'/ wp-content / uploads / twitter.gif'）不重复剩50％; 
 line-height：30px; 
保证金：0.3em 0 0 -0.7em; 
填充：0 0 0 1.5em; 
} 
 
 ul.follow-background li.blacksquareicon {
 list-style：none outside！important; 
背景：url（'/ wp-content / uploads / black-square-16x16.png'）不重复留下50％; 
 line-height：30px; 
保证金：0.3em 0 0 -0.6em; 
填充：0 0 0 1.6em; 
 
  

HTML

 < p>通过我们的社交媒体帐户与我们联系。< / p> 
< ul class =follow-background> 
< li class =Facebookicon>< a href =https://www.facebook.com/baeeorg =nofollow> Facebook< / a>< / li> 
< li class =twitter>< a href =https://twitter.com/BaeeArtists =nofollow> Twitter< / a>< / li> 
< li class =blacksquareicon>< a href =/ news />新闻公告（订阅获取我们的最新帖子）< / a>并确保您了解我们所有的活动。< / li> 
< / ul> 
  

只要列表项文字不换行，这些工作就可以正常工作。最后一行换行，图像项目符号下降并位于两条被包装的行之间。我希望它坐在顶线旁边。

我该怎么做？
Thanks。

解决方案不使用百分比作为垂直背景位置（ 50％ / code>），设置一个固定的背景位置 - 6px 。

btw - you可以通过将大多数属性分配给基本列表项目类（ .follow ）而不是为每个列表项目重复它们来压缩CSS。

body {width：400px;}。follow {list-style：none outside; line-height：30px;背景：no-repeat left 6px; / **固定垂直位置** /保证金：0.3em 0 0 -0.7em; padding：0 0 0 1.5em;}。follow.facebookicon {background-image：url（'http://lorence.tom.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 = 后续背景 > < li class =follow facebookicon>< a href =https://www.facebook.com/baeeorg =nofollow> Facebook< / a>< / li> < li class =follow twittericon>< a href =https://twitter.com/BaeeArtists =nofollow> Twitter< / a>< / li> < li class =follow blacksquareicon>< a href =/ news />新闻公告（订阅获取我们的最新帖子）< / a>并确保您了解我们所有的活动。< / li>< / ul>

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.

解决方案

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>

这篇关于如何让背景图像项目符合包装清单项目的第一行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！