我使用背景图像作为子弹。
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>
只要列表项文本不包装,这些工作就可以正常工作。最后一行包裹,图像子弹落下并位于两条包裹线之间。我希望它坐在顶线附近。
我该怎么做? 感谢。
答案 0 :(得分:0)
不使用百分比作为垂直背景位置(50%
),而是设置固定的背景位置 - 6px
。
btw - 您可以通过将大多数属性分配给基本列表项类(.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>