在其内容之后使用列表项中的精灵图像

Question

我有以下 html 用于 ul:

<div id="articlesideitems">
  <ul>
      <li><a href="#"><span style="">List item content 1</span><span>&nbsp;</span></a></li>
      <li><a href="#"><span>List item content 2</span><span>&nbsp;</span></a></li>
      <li><a href="#"><span>List item long long long long long long content</span><span>&nbsp;</span></a></li>
      <li><a href="#"><span>List item long long long long long long content</span><span>&nbsp;</span></a></li>                                                                                                          
  </ul>
<div id="articlesideitems">

和css：

div#articlesideitems ul li span {
   display: inline-block;
}

div#articlesideitems ul li span:last-child {
   background: url('images/sprite.png') no-repeat -87px -13px;
   width: 9px;
   height: 16px;
   margin-left: 10px;
}

输出类似于：

如您所见，当文本多行时，双箭头不在文本末尾，而是在新行上。如何解决这个问题？

Answer 1

仅将 display: inline-block 应用于 span:last-child

div#articlesideitems ul li span:last-child {
   display: inline-block;
}

示例：http://codepen.io/anon/pen/KpKoNg

结果

Answer 2

这里有一个选项，可以通过删除所有 <span> 来减少所需的标记量，还可以通过使用 ::after 伪元素插入双精度元素来消除对外部图像的需要角引号 (\bb)，前面是一个不间断的 space (\a0)。它看起来完全与您的 sprite 中的一样，因此您需要决定这是否是可以接受的牺牲。

More information on pseudo elements

调整浏览器大小window 以查看换行方式。

body{margin:0;}
#articlesideitems ul{
    list-style:none;
    margin:0 auto;
    padding:0;
    width:50%;
}
#articlesideitems li{
    border-bottom:1px solid #009;
}
#articlesideitems a{
    color:#009;
    display:block;
    font-family:verdana;
    padding:5px;
    text-decoration:none;
}
#articlesideitems a::after{
    content:"\a0\bb";
}

<div id="articlesideitems">
    <ul>
        <li><a href="#">List item content 1</a></li>
        <li><a href="#">List item content 2</a></li>
        <li><a href="#">List item long long long long long long content</a></li>
        <li><a href="#">List item long long long long long long content</a></li>
    </ul>
</div>

在其内容之后使用列表项中的精灵图像

Using image from sprite in list item after its' content

css

css-sprites

html-lists