在列表項使用圖像從精靈的內容後

Question

我有UL下面的HTML：

<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; 
} 

和輸出類似於：

如您所見，當文本有多行時，雙箭頭不在文本的末尾，bu在一條新的線上。如何解決這個問題？

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

這裏是爲你減少標記requir量的選項通過刪除所有<span> s並通過使用::after僞元素插入雙角度引號（\bb），在非空白區域（\a0）之前插入，從而消除了對外部圖像的需要。它不會看起來正好就像它在你的精靈一樣，所以你需要決定這是否是一個可以接受的犧牲。

More information on pseudo elements

調整您的瀏覽器窗口中看到的線怎麼休息。

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>