當一個頁面中的內容過長，超過了瀏覽器的可視范圍時，我們通常會使用滾動條來滾動瀏覽這些內容。在CSS中，我們可以通過控制元素的尺寸以及使用overflow屬性來設置滾動條的顯示方式。

首先，我們需要為元素設置一個固定的寬度，以便它能夠容納所有內容。然后，我們可以通過設置overflow-x屬性為scroll來顯示水平滾動條。例子如下：

.container {
width: 500px;
overflow-x: scroll;
}

在這個例子中，我們創建了一個類名為container的元素，設置了它的寬度為500px，然后設置了overflow-x屬性為scroll。這樣，當該元素的內容寬度超出500px時，就會顯示水平滾動條。

除了使用scroll來顯示水平滾動條之外，我們還可以使用auto屬性。這樣，當元素的內容超過寬度時，自動顯示滾動條。例如：

.container {
width: 500px;
overflow-x: auto;
}

在這個例子中，當元素的內容不足500px時，不會顯示滾動條。當元素的內容超過寬度時，自動顯示水平滾動條。

總之，通過設置元素的寬度和overflow屬性，我們可以輕松地控制水平滾動條的顯示方式。在實際的頁面設計中，我們可以根據具體需要來選擇使用scroll還是auto屬性來達到最佳的效果。