将文本和图像放在列表项中的同一行 - 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

使用时

显示:内联块;

不要用

向左飘浮;

尝试

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

这是小提琴的链接