在HTML頁面中，我們經常使用div元素來創建各種容器。然而，當我們在div元素中使用CSS的ul列表時，有時候會遇到一個問題，就是當ul中的列表項超出了div的邊界，會出現滾動條或者列表內容被截斷的情況。這篇文章將通過幾個代碼案例來詳細解釋和說明這個問題。
案例一： 讓我們看一個簡單的示例。假設我們有一個div容器，寬度為300px，高度為200px。我們在其中放置了一個無序列表ul，ul中有很多列表項li，總高度超過了div容器的高度。我們希望這些超出的列表項能夠自動顯示滾動條，而不是被截斷。

html
<pre>
<div class="container">
<ul class="list">
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
...
<li>列表項n</li>
</ul>
</div>

.list {
height: 100%;
overflow-y: auto;
}

在這個案例中，我們使用了CSS的overflow-y屬性來解決問題。我們將div容器的高度設置為100%，這樣ul列表的高度就會自動適應div容器的高度。然后，我們使用overflow-y屬性將列表項超出div容器高度的部分隱藏起來，并自動顯示垂直滾動條。
案例二： 在一些情況下，我們可能希望列表項超出div容器的部分能夠自動換行，而不是顯示滾動條。這個效果可以通過一些CSS屬性來實現。
html

<div class="container">
<ul class="list">
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
...
<li>列表項n</li>
</ul>
</div>

.list {
height: 100%;
overflow-y: hidden;
white-space: nowrap;
}
.list li {
display: inline-block;
margin-right: 10px;
}

在這個案例中，我們使用了CSS的white-space屬性來實現自動換行效果。我們將ul列表的高度設置為100%，將超出div容器高度的部分隱藏起來。然后，我們將li列表項的display屬性設置為inline-block，使得列表項可以橫向排列。最后，我們使用margin-right屬性來設置列表項之間的間距。
通過以上兩個案例，我們詳細解釋了在CSS中如何處理ul超出div容器的問題。我們可以根據實際情況選擇滾動條或自動換行的方式來適應頁面布局需求。希望這些代碼示例能夠幫助你解決在使用CSS ul時可能遇到的問題。