images appear stacked as column instead of as a row

Question

I have the following CSS rule:

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

I have a set of star images which I want to appear as ***** Instead, they appear as:

*
*
*
*
*

The code I'm trying is:

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

I want to achieve ***** 5 Star Rating Any help will be appreciated

Answer 1

Personally I'd use a list instead of a load of <div>'s / <span>'s - http://jsfiddle.net/spacebeers/fk2zL/

css code:

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

html code:

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

Answer 2

apply these style="float:left; padding-right:10px; display: inline;" style on each image instead of using it on span

CSS:

span img {float:left; padding-right:10px; display: inline;}​

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

Answer 3

use this

.list_meta img{
    float:left;
}

Answer 4

Put the images inside a <ul>