在設計網頁時，CSS列表是非常常見的元素。然而，當列表中的元素太多時，它們會超出容器的寬度，導致頁面布局混亂。為了解決這個問題，我們可以使用CSS的超出橫向滾動功能。

ul {
overflow-x: auto;
white-space: nowrap;
}
li {
display: inline-block;
padding: 10px;
}

可以看到，我們將ul元素的overflow-x屬性設置為auto，就可以實現水平滾動。但是，如果不設置white-space屬性，列表項將會自動換行，影響我們的滾動效果。因此，我們將white-space屬性設置為nowrap，可以讓文字在同一行顯示。

此外，我們需要將列表項的display屬性設置為inline-block，以便它們在同一行顯示，并添加一些padding以增加可讀性。

綜上所述，使用CSS的列表超出橫向滾動功能可以方便地在網頁中顯示大量的列表項，同時避免了頁面布局混亂的問題。