将文本和图像放在列表项中的同一行上-html/css [英] putting text and images on same line within a list item - html/css

问题描述

我想知道是否有人可以帮助我解决我遇到的一个小的html/css问题.基本上，我试图为每个列表项的项目符号创建一个具有不同图像的无序列表，并在同一行的右侧添加一个文本.更具体地，在第一行的标题和在下面的一些普通文本.此刻，我可以在同一行上获取图像和文本:-(这是我的代码.

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.

任何帮助将不胜感激.

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

推荐答案

同时使用

display:inline-block;

display:inline-block;

不要使用

float:left;

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

这是链接到小提琴

这篇关于将文本和图像放在列表项中的同一行上-html/css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！