圖像出現堆積如柱，而不是作爲行

Question

我有以下的CSS規則：

.list_meta { 
font-size: 10px; 
line-height: 18px; 
margin-bottom: -1px; 
color: 
#999; 
text-transform: uppercase; 
display: block; 
} 

我有一組恆星的圖像，我想反而出現***** ，他們以顯示：

* 
* 
* 
* 
* 

我想要的代碼是：

<span class="list_meta"> 
    <span style="float:left; padding-right:10px; display: inline;"> 
     <img src="small_star.png" alt="Star" height="9" width="10"> 
     <img src="small_star.png" alt="Star" height="9" width="10"> 
    </span> 
5 Star Rating</span> 

我想實現***** 5 Star Rating 任何幫助將不勝感激

Answer 1

使用本

.list_meta img{ 
    float:left; 
} 

Answer 2

把圖片內<ul>

Answer 3

個人而言，我會使用的，而不是<div>的/ <span>的負載名單 - http://jsfiddle.net/spacebeers/fk2zL/

CSS代碼：

li { 
    float: left; 
    list-style: none; 
    padding-right:10px; 
} 

的html代碼：

<ul> 
    <li>*</li> 
    <li>*</li> 
    <li>*</li> 
    <li>*</li> 
    <li>*</li> 
</ul> 

Answer 4

上應用這些style="float:left; padding-right:10px; display: inline;"風格每個圖像上，而不是使用它的span

CSS：

HTML：

<span class="list_meta"> 
    <span> 
     <img src="http://cdn1.iconfinder.com/data/icons/diagona/icon/16/031.png" alt="Star" height="9" width="10"> 
     <img src="http://cdn1.iconfinder.com/data/icons/diagona/icon/16/031.png" alt="Star" height="9" width="10"> 
    </span> 
5 Star Rating 
</span>​ 

SEE FIDDLE