當(dāng)我們?cè)诰W(wǎng)頁中需要使用滾動(dòng)條時(shí)，我們可能會(huì)發(fā)現(xiàn)默認(rèn)的滾動(dòng)條樣式不夠美觀或者不符合我們的設(shè)計(jì)需求。CSS提供了自定義滾動(dòng)條的能力，可以實(shí)現(xiàn)特定樣式的滾動(dòng)條。

常見的滾動(dòng)條有橫向滾動(dòng)條和豎向滾動(dòng)條，本篇文章將介紹如何只顯示橫向滾動(dòng)條。

/* 隱藏豎向滾動(dòng)條 */
overflow-y: hidden;
/* 顯示橫向滾動(dòng)條 */
overflow-x: scroll;

以上是核心代碼，只需要將需要添加滾動(dòng)條的元素添加以上屬性即可。其中，overflow-y: hidden;將豎向滾動(dòng)條隱藏，overflow-x: scroll;則將橫向滾動(dòng)條顯示出來。

需要注意的是，若元素內(nèi)部?jī)?nèi)容超過了外部容器的寬度，才會(huì)出現(xiàn)橫向滾動(dòng)條。可以使用white-space: nowrap;將元素內(nèi)部文本強(qiáng)制不換行，以適應(yīng)橫向滾動(dòng)條。

/* 文本不換行 */
white-space: nowrap;

除此之外，還可以使用CSS3的::-webkit-scrollbar偽類和scrollbar-track和scrollbar-thumb屬性自定義滾動(dòng)條的樣式。具體可參考CSS3文檔。

以上就是如何只顯示橫向滾動(dòng)條的方法，希望對(duì)你有所幫助。