CSS를 사용하여 div를 가로로 스크롤합니다.

在 CSS 中，我们可以通过设置适当的“over-flow”属性值来使 div 水平滚动。

首先，让我们了解为什么我们需要使 div 水平滚动。例如，父div元素的宽度为500px，或者屏幕尺寸为500px。现在，div 元素的内容是 1500px。因此，如果我们不让父 div 水平滚动，就会破坏应用程序的 UI。因此，我们可以使其可滚动，用户可以滚动查看不可见的内容。

语法

用户可以按照以下语法使 div 水平滚动。

.scroll { width:; overflow: scroll; }

在上面的语法中，我们使用了“width”和“overflow”属性来使 div 水平滚动。如果我们不指定元素的宽度，“overflow”属性不会受到影响。

示例 1

在下面的示例中，我们创建了 HTML div 并添加了一些文本内容。在 CSS 中，我们为 div 元素指定了“500px”固定宽度。此外，我们还设置了“scroll”作为溢出属性的值。

在输出中，用户可以观察到，当文本宽度大于类名为“scroll”的 div 的宽度时，div 元素中出现水平滚动条。

   
  
Using the  overflow-x: scroll  to make a div horizontally scrollable using CSS
 
 The United States of America (USA) has the largest GDP in the world. In 2020, the nominal GDP of the United States was $21.43 trillion. China is the second-largest economy in the world, with a nominal GDP of $14.34 trillion in 2020. Other countries with large GDPs include Japan, Germany, and the United Kingdom. 
  

示例 2

在下面的示例中，我们使用了“overflow: auto”CSS 属性来使 div 水平滚动。此外，我们还为 div 元素指定了固定宽度。 ‘auto’和‘scroll’值之间的主要区别是，当我们使用‘scroll’时，div始终保持可滚动，而当我们使用‘auto’时，div元素在发生溢出时变得可滚动。

   
  
Using the  overflow: auto  to make a div horizontally scrollable using CSS
 
 This is a sample text to put in the HTML div element. You can scroll this div horizontally. 
  

示例 3

在下面的示例中，我们使用了“overflow-x: auto”CSS 属性来使 div 水平滚动。我们已在父 div 内添加了单个子 div。

在输出中，用户可以观察到，由于我们使用了“auto”值，最初外部 div 是不可滚动的。当我们点击“添加 div”按钮时，它会使用 JavaScript 将子 div 添加到父 div，并且当您添加 5 到 7 个子 div 时，它会自动变得可滚动。

   
  
Using the  overflow-x: auto  to make a div horizontally scrollable using CSS
 
 
 Inner Div 
 
  Add div    

示例 4

在下面的示例中，我们使用 CSS 设计了滚动条。首先，我们使 div 可以水平滚动以显示滚动条。之后，我们设置滚动条的背景颜色。此外，我们还设计了滚动条轨道和滑块。

在输出中，用户可以观察到好看的滚动条，并根据需求进行设计。

   
  
Using the  overflow-x: auto  to make a div horizontally scrollable using CSS
 
 This div is horizontally scrollable. How are you? Do you like CSS? Tutorials Point is a leading Ed Tech company striving to provide the best learning material on technical and non-technical subjects. 
  

用户学会了使用 CSS 的“overflow”属性使 div 水平滚动。在第一个示例中，我们使用了“overflow:scroll”CSS 属性。在第二个示例中，我们使用了“overflow: auto”CSS 属性。在第三个示例中，我们使用了“overflow-x: auto”CSS 属性；在最后一个示例中，我们使用 CSS 设计了滚动条。

위 내용은 CSS를 사용하여 div를 가로로 스크롤합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!