如何使背景图像项目符号与包装列表项的第一行对齐?
How do I keep a background image bullet aligned with the first line of a wrapped list item?
我正在使用背景图片作为项目符号。
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>
只要列表项文本不换行,这些就可以正常工作。最后一行换行,图像项目符号落下并位于两条换行之间。我希望它位于顶行旁边。
我该怎么做?
谢谢
不要使用百分比作为垂直背景位置 (50%
),而是设置一个固定的背景位置 - 6px
.
顺便说一句 - 您可以通过将大多数属性分配给基本列表项 class(.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>
我正在使用背景图片作为项目符号。
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>
只要列表项文本不换行,这些就可以正常工作。最后一行换行,图像项目符号落下并位于两条换行之间。我希望它位于顶行旁边。
我该怎么做? 谢谢
不要使用百分比作为垂直背景位置 (50%
),而是设置一个固定的背景位置 - 6px
.
顺便说一句 - 您可以通过将大多数属性分配给基本列表项 class(.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>