資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝學
法學使用CSS建立水平可滾動div
要使div水平可滾動，我們需要使用**CSS overflow屬性**。在這篇文章中，我們將展示所有可能的使div水平可滾動的方法。
首先，讓我們瞭解為什麼需要使div水平可滾動。例如，父div元素的寬度為500畫素，或螢幕大小為500畫素。現在，div元素的內容為1500畫素。因此，如果我們不使父div水平可滾動，它會破壞應用程式的UI。因此，我們可以使其可滾動，使用者可以滾動檢視不可見的內容。
使div水平可滾動的方法
如下所述，有兩種方法可以使div水平可滾動。
使用overflow-x屬性建立水平可滾動div
在這種方法中，我們必須建立一個固定高度的div，以便捲軸可以出現在div上。
- 我們將使用**CSS white-space屬性** 並設定**"white-space: nowrap;"** 將div摺疊成單個空格，以便div的內容可以連續出現在同一行上。
- 現在，我們將使用**CSS overflow-x屬性** 並設定**"overflow-x: auto;"** 或**"overflow-x: scroll;"** 這將導致在div元素上出現水平滾動機制。
示例
在這個示例中，我們實現了上述方法。
<!DOCTYPE html>
<html>
<head>
<title>
Horizontal scrollable div using overflow-x Property
</title>
<style>
div.scroll {
margin: 4px, 4px;
padding: 4px;
background-color: yellow;
width: 300px;
overflow-x: auto;
white-space: nowrap;
border: 2px solid black;
}
</style>
</head>
<body>
<h3>Horizontally Scrollable div Element</h3>
<p>
Here in this example, we have used
CSS white-space, and overflow-x property.
</p>
<div class="scroll">
To make a div horizontally scrollable we will
need to use the CSS overflow property.
In this article we will show all the possible
ways to make div horizontally scrollable.
</div>
</body>
</html>
使用overflow屬性建立水平可滾動div
在這種方法中，我們必須建立一個固定高度的div，以便捲軸可以出現在div上。這種方法的區別在於它也可以建立垂直滾動。
- 我們將設定**"white-space: nowrap;"** 將div摺疊成單個空格，以便div的內容可以連續出現在同一行上。
- 同樣，我們將使用**CSS overflow屬性** 並設定**"overflow: auto;"** 或**"overflow: scroll;"** 這將導致在div元素上出現水平滾動機制。
示例
在這個示例中，我們實現了上述方法。
<!DOCTYPE html>
<html>
<head>
<title>
Horizontal scrollable div using overflow Property
</title>
<style>
div.scroll {
margin: 4px, 4px;
padding: 4px;
background-color: yellow;
width: 300px;
overflow: auto;
white-space: nowrap;
border: 2px solid black;
}
</style>
</head>
<body>
<h3>Horizontally Scrollable div Element</h3>
<p>
Here in this example, we have used
CSS white-space, and overflow property.
</p>
<div class="scroll">
To make a div horizontally scrollable we will
need to use the CSS overflow property.
In this article we will show all the possible
ways to make div horizontally scrollable.
</div>
</body>
</html>
結論
在這篇文章中，我們學習了透過兩種不同的方法建立水平可滾動的div。在第一種方法中，我們使用了**CSS overflow-x屬性**，我們可以使用**'scroll'** 或**'auto'** 值。在第二種方法中，我們使用了**CSS overflow屬性**，類似地，我們可以使用**'scroll'** 和**'auto'** 值來建立一個水平可滾動的div。但是我們需要記住，div的內容應該能夠建立需要水平滾動的場景。在兩個示例中，我們都透過使用**CSS white-space屬性** 強制建立了這種情況。
更新於：2024年6月26日
5K+ 次瀏覽
廣告