html - 为什么设置 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

因为你有 float: left;对于 <li> <li> 之后的所有内容正在崩溃 - 尝试切换为 display: inline-block;在 <li> 上元素，这可能有效。