當我們使用CSS為我們的網(wǎng)頁創(chuàng)建列表時，有時候會發(fā)現(xiàn)圖片不會被UL標簽完全包住。這個問題通常出現(xiàn)在我們使用帶有不同大小圖片的列表時。

<ul>
<li><img src="image1.jpg" alt="Image 1">List item 1</li>
<li><img src="image2.jpg" alt="Image 2">List item 2</li>
<li><img src="image3.jpg" alt="Image 3">List item 3</li>
</ul>

以上代碼是一個典型的圖片列表的例子。但是當我們在CSS中設置了UL標簽的邊框時，會發(fā)現(xiàn)圖片并沒有完全包住。這是由于圖片默認是放在文字的基線(baseline)上的，而不是底部(bottom)位置。

為了解決這個問題，我們可以使用CSS中圖片的vertical-align屬性。將其設置為bottom即可將圖片放在列表項的底部。

<ul>
<li><img src="image1.jpg" alt="Image 1" style="vertical-align:bottom">List item 1</li>
<li><img src="image2.jpg" alt="Image 2" style="vertical-align:bottom">List item 2</li>
<li><img src="image3.jpg" alt="Image 3" style="vertical-align:bottom">List item 3</li>
</ul>

以上代碼將圖片的vertical-align屬性設置為bottom，使得所有的圖片都位于列表項的底部，從而完全包住了UL標簽。