为什么设置p元素的背景颜色也会设置上面图像的背景颜色

Question

所以我正在创建一个带有标题的图像库，我很困惑，因为我从来没有发生这种情况，但现在当我设置p元素的背景颜色时，它也设置了元素背后的背景。到目前为止，我已经尝试了几件事，例如将图像的背景颜色设置为无和其他东西，但没有任何效果，任何帮助都将非常感谢！这是我的代码片段，我很乐意更新所需的更多信息。

HTML

<div id="wrapper">

    <ul id="products">
        <li><a href="ambco.html"><img src="img/650a.jpg" alt=""><p>Hello I am Jacob 
        and I'm confused as hell and this doesn't make sense...</p></a></li>
        <li><p>Hello I am Jacob and I'm confused as hell and this doesn't
        make sense...</p></li>
        <li><p>Hello I am Jacob and I'm confused as hell and this doesn't
        make sense...</p></li>
    </ul>
</div>

CSS

#products {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#products li {
    width: 95%;
    margin: 2.5%;
    float: left;
}

#products img {
    margin-bottom: 15px;
}

#products p {
    background-color: black;
    color: brown;
}

#products a {
    text-decoration: none;
}

Answer 1

因为!is.na(...)崩溃后float: left;所有内容都<li> - 尝试在<li>元素上切换display: inline-block;，这可能会有效。