html - 并排对齐图像和文本

标签 html css css-float

我有一个包含三个服务元素的列表,其中包含一个图像(打算向左浮动)和一小段文本(打算向右浮动)。我有我认为正确的代码,但它不能正常工作,我不知道问题可能是什么。

<ul id="work">
<li><img src="http://placehold.it/350x150" /><p>SERVICE 1<br/><p>Service 1 description.</p></li>
<li><img src="http://placehold.it/350x150" /><p>SERVICE 2<br/><p>Service 2 description.</p></li>
<li><img src="http://placehold.it/350x150" /><p>SERVICE 3<br/><p>Service 3 description.</p></li>

#work li {
   list-style-type: none !important;
}

#work li img {
    float: left;
}

#work li p {
    float: right;
}

https://jsfiddle.net/feewvmvt/

最佳答案

问题是您正在嵌套

元素:

某事

某事


用结束的

替换
并且一切都排成一行:
https://jsfiddle.net/jalbertbowdenii/5axLw1ww/

关于html - 并排对齐图像和文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36440160/

相关文章:

html - css滑动菜单有问题

javascript - 使 slider 箭头在魔术 slider 中始终可见

javascript - 交互式幻灯片之间的中间图像(jQuery?)

html - 如何让没有内容的div有宽度?

html - 背景图像部分之间的间距

javascript - jQuery和实时操作

javascript - 如何确定用户何时滚动到容器div的底部?对于无限滚动

javascript - 如何在标签元素内的文本旁边添加新文本

html - 为什么 div 不围绕它的 child ?

html - <li> 标签内的图片