我有一个包含三个服务项的列表,其中包含一个图像(旨在向左浮动)和一小段文本(旨在向右浮动)。我已经有了我认为合适的代码,但它不能正常工作,我不知道问题出在哪里。
<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;
}
最佳答案
问题是您正在嵌套 <p>
元素:
<p>something<br><p>something</p>
换出 <br>
结束</p>
一切都排成一行:
https://jsfiddle.net/jalbertbowdenii/5axLw1ww/
关于html - 并排对齐图像和文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36440160/