putting text and images on same line within a list item - html/css

Question

I was wondering if anyone could help me out with a small html/css issue I am having. Basically, I am trying to make a unordered list with a different image for the bullet of each list item, with a text to the right on the same line. More specifically, a header on the top line and some normal text below. At the moment, I can get the image and the text on the same line :-( Here is my code.

Any help would be greatly appreciated.

Html:

<ul>
    <li class="service-list">
        <a href=""><img src="image.png" alt="icon" class="alignnone size-full wp-image-156" /></a>
        <h3>Header</h3>
        <p>
        text goes here
        </P>
    </li>
....
</ul>

CSS:

.service-list {
    list-style-type: none;
    margin-left:0px;
    padding-left:0px;
    float: left;
    display: inline-block;
}


.service-list p {
    text-align: right; 
    margin: 0; 
    padding: 0;
}

Answer 1

While using

display:inline-block;

don't use

float:left;

Try

.service-list {
list-style-type: none;
margin-left:0px;
padding-left:0px;
display: inline-block;
}

.service-list img
{
float:left;
}

.service-list p,.service-list h3 {
text-align: right; 
display:inline-block;
padding: 0;
}

Here is the Link to Fiddle