CSS 中出現水平滾動條可能是因為某些元素的寬度超過了其父元素的寬度，或者設置了固定寬度導致元素溢出。比如下面這個例子：

<div style="width: 200px; overflow-x: auto;"><ul style="width: 300px;"><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li><li>Item 5</li><li>Item 6</li></ul></div>

這里設置了一個寬度為 200px 的 div，并且設置了 overflow-x: auto，表示橫向溢出時顯示水平滾動條。而 ul 元素的寬度為 300px，超過了 div 的寬度，因此就會出現水平滾動條。

如果我們將 ul 的寬度改為 150px，就不會再出現水平滾動條了：

<div style="width: 200px; overflow-x: auto;"><ul style="width: 150px;"><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li><li>Item 5</li><li>Item 6</li></ul></div>

另外，有時候元素的寬度并沒有超過父元素的寬度，仍然出現水平滾動條，這通常是因為元素跟其他元素之間的間隙（如 margin、border、padding 等）導致了元素寬度的增加。

總之，出現水平滾動條時，我們需要檢查元素的寬度是否超過了父元素的寬度，或者是否存在間隙導致元素寬度增加，以及是否設置了固定寬度等原因。