国产体育生系列GAY钙片,亚洲毛片,全免费一级午夜毛片

技術(shù)頻道 - html技術(shù)

[2示例]使用 CSS 使 div 可水平滾動(dòng)

作者:admin 時(shí)間:2022-9-9 14:24:27 瀏覽:

本文中，我們將了解如何使用 CSS 設(shè)計(jì)水平滾動(dòng)的 div，并通過(guò)示例了解其實(shí)現(xiàn)。我們可以使用CSS overflow屬性使 div 水平滾動(dòng)。overflow屬性中有不同的值。例如，overflow: auto; 用于在需要時(shí)自動(dòng)添加滾動(dòng)條，以及像overflow-x:auto; 這樣的軸隱藏，用于僅制作水平滾動(dòng)條。

對(duì)于水平滾動(dòng)條，使用 x 和 y 軸。設(shè)置overflow-y:hidden; 和 overflow-x:auto; 這將自動(dòng)隱藏垂直滾動(dòng)條并僅顯示水平滾動(dòng)條。這white-space: nowrap: 屬性用于將文本換行。這里的滾動(dòng) div 將是水平滾動(dòng)的。

例1：在這個(gè)例子中，我們使用了overflow-y:hidden; 和overflow-x:auto;使 div水平滾動(dòng)。

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: Green;
}

div.scroll {
margin: 4px, 4px;
padding: 4px;
background-color: #08c708;
width: 300px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
</style>
</head>

<body>
<center>
<h1>WebKaka.com</h1>
<h2>
使用CSS使div橫向滾動(dòng)
    </h2>
<div class="scroll">
這是一個(gè)學(xué)習(xí)編程的好平臺(tái)。
這是一個(gè)教育網(wǎng)站。準(zhǔn)備
產(chǎn)品型公司的招聘驅(qū)動(dòng)
像微軟，亞馬遜，Adobe等免費(fèi)
在線(xiàn)安置準(zhǔn)備課程。課程
關(guān)注各種MCQ和編碼問(wèn)題
在面試中被問(wèn)到&讓你的即將到來(lái)
安置季節(jié)有效且成功。而且
任何極客都可以通過(guò)寫(xiě)文章來(lái)幫助其他極客
在極客中，發(fā)表文章的人很少
步驟是需要很少修改的文章
或者首先公布來(lái)自評(píng)審者的改進(jìn)。
要快速查看您的文章，請(qǐng)參閱
現(xiàn)有文章、格式樣式、編碼樣式，
試著讓你接近他們。如果你是
初學(xué)者，您可以參考指南來(lái)撰寫(xiě)文章
</div>
</center>
</body>

</html>

demo download

輸出

使用overflow-x: auto;和overflow-y: hidden;

示例 2：在此示例中，我們使用 auto 代替了 overflow-y: hidden; 和overflow-x:auto; 使 div 水平滾動(dòng)。

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: Green;
}

div.scroll {
margin: 4px, 4px;
padding: 4px;
background-color: #08c708;
width: 300px;
overflow: auto;
white-space: nowrap;
}
</style>
</head>

<body>
<center>
<h1>WebKaka.com</h1>
<h2>
使用CSS使div橫向滾動(dòng)
    </h2>
<div class="scroll">
這是一個(gè)學(xué)習(xí)編程的好平臺(tái)。
這是一個(gè)教育網(wǎng)站。準(zhǔn)備
產(chǎn)品型公司的招聘驅(qū)動(dòng)
像微軟，亞馬遜，Adobe等免費(fèi)
在線(xiàn)安置準(zhǔn)備課程。課程
關(guān)注各種MCQ和編碼問(wèn)題
在面試中被問(wèn)到&讓你的即將到來(lái)
安置季節(jié)有效且成功。而且
任何極客都可以通過(guò)寫(xiě)文章來(lái)幫助其他極客
在極客中，發(fā)表文章的人很少
步驟是需要很少修改的文章
或者首先公布來(lái)自評(píng)審者的改進(jìn)。
要快速查看您的文章，請(qǐng)參閱
現(xiàn)有文章、格式樣式、編碼樣式，
試著讓你接近他們。如果你是
初學(xué)者，您可以參考指南來(lái)撰寫(xiě)文章
</div>
</center>
</body>

</html>