html - 将文本和图像放在列表项中的同一行 - html/css

Question

我想知道是否有人可以帮助我解决我遇到的一个小 html/css 问题。基本上，我试图制作一个无序列表，其中每个列表项的元素符号都有不同的图像，并且在同一行的右侧有一个文本。更具体地说，顶行的标题和下面的一些普通文本。目前，我可以在同一行获取图像和文本:-( 这是我的代码。

如有任何帮助，我们将不胜感激。

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

使用时

display:inline-block;

不要使用

float:left;

尝试

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

这是 Link to Fiddle