ap要素の背景色を設定すると、上の画像の背景色も設定されます

Question

キャプション付きの画像ギャラリーを作成しています。前回と同じように混乱しています。 p要素の背景色を設定すると、要素の背後に背景も設定されます。私はこれまで、画像の背景色をnoneなどに設定するなどいくつかのことを試しましたが、何も効果がありませんでした。どんなヘルプも大歓迎です！ここに私のコードスニペット、私は喜んでもっと必要な情報を更新します。

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

<li>が崩壊した後、あなたは<li>すべてのためfloat: left;を持っているので - 切り替えてみてくださいdisplay: inline-block;の<li>要素では、これが機能する可能性があります。