html - 并排对齐图像和文本

Question

我有一个包含三个服务项的列表，其中包含一个图像(旨在向左浮动)和一小段文本(旨在向右浮动)。我已经有了我认为合适的代码，但它不能正常工作，我不知道问题出在哪里。

<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/

Answer 1

问题是您正在嵌套 <p>元素:
<p>something<br><p>something</p>
换出 <br>结束</p>一切都排成一行:
https://jsfiddle.net/jalbertbowdenii/5axLw1ww/