您好,登錄后才能下訂單哦!
這篇文章主要介紹了css怎么取消橫向滾動(dòng)條的相關(guān)知識(shí),內(nèi)容詳細(xì)易懂,操作簡單快捷,具有一定借鑒價(jià)值,相信大家閱讀完這篇css怎么取消橫向滾動(dòng)條文章都會(huì)有所收獲,下面我們一起來看看吧。
css可以取消橫向滾動(dòng)條,只需要給滾動(dòng)條的父元素添加overflow-x屬性,并將屬性值設(shè)為“hidden”即可,語法為“父元素{overflow-x: hidden;}”;該方法可以設(shè)置當(dāng)內(nèi)容溢出左或右邊緣時(shí)不提供滾動(dòng)機(jī)制,直接裁剪內(nèi)容。
本教程操作環(huán)境:windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
css可以取消橫向滾動(dòng)條。
在css中,可以使用overflow-x屬性來刪除橫向滾動(dòng)條。
overflow-x 屬性規(guī)定當(dāng)元素溢出內(nèi)容區(qū)域,是否對內(nèi)容的左/右邊緣進(jìn)行裁剪
當(dāng)屬性值設(shè)置為“hidden”時(shí),設(shè)置當(dāng)內(nèi)容溢出左或右邊緣時(shí)不提供滾動(dòng)機(jī)制,直接裁剪內(nèi)容。
示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> div { width: 1400px; } </style> </head> <body> <div> 很長的內(nèi)容... </div> </body> </html>
可以看到出現(xiàn)橫向滾動(dòng)條。
為了隱藏這個(gè)滾動(dòng)條,我們可以給滾動(dòng)條元素(溢出元素)的父元素設(shè)置overflow-x 屬性。這里就是body元素
body{ overflow-x: hidden; }
可以看到頁面上的滾動(dòng)條已經(jīng)沒有了。
說明:這種方法隱藏的滾動(dòng)條,當(dāng)內(nèi)容很長,是會(huì)把部分內(nèi)容也隱藏掉的,因?yàn)橐紤]好,最好設(shè)置一個(gè)最大的寬度,讓其自動(dòng)換行。
body{ overflow-x: hidden; max-width: 1000px; }
關(guān)于“css怎么取消橫向滾動(dòng)條”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對“css怎么取消橫向滾動(dòng)條”知識(shí)都有一定的了解,大家如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。