很多網頁開發人員都會遇到一個問題，就是當需要在網頁中加入橫向的滾動時，卻發現無論怎么調整CSS，都無法實現橫向滾動。那么，這個問題到底是怎么回事呢？

div {
width: 100%; 
height: 100px; 
overflow-x: auto; 
white-space: nowrap; 
}
span {
display: inline-block; 
height: 100%; 
margin-right: 20px; 
}

代碼中，我們設置一個div的CSS屬性，包括寬度、高度、水平滾動、空白處理等；再在div中嵌套若干個span標簽，每個span標簽表示一個垂直區塊。

問題出在white-space: nowrap;這一屬性上。這個屬性的作用是設置文本的處理方式，在本例中，它用來取消文本的默認換行處理，讓span標簽能夠排成一行，從而形成橫向滾動的效果。

但是，當我們把這個屬性應用于父元素div時，就會發現橫向滾動不可用。這是因為，white-space: nowrap;會強制隱藏過長的文本，而此時文本已經不能進行滾動，因此效果就沒有達到我們預期的橫向滾動。

那么，怎么解決這個問題呢？其實非常簡單，把white-space: nowrap;從父元素div中去掉，改為應用于span元素即可。

div {
width: 100%; 
height: 100px; 
overflow-x: auto; 
}
span {
display: inline-block; 
height: 100%; 
margin-right: 20px; 
white-space: nowrap; 
}

這樣，我們就可以在網頁中實現橫向滾動了。需要注意的是，在使用white-space: nowrap;時，應該確保文本內容不會超過父元素的寬度。否則，文本會被強制截斷，影響視覺效果。