使用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+ 次浏览

启动您的职业生涯

完成课程后获得认证

开始学习
广告