首先，让我们了解为什么我们需要使 div 水平滚动。例如，父div元素的宽度为500px，或者屏幕尺寸为500px。现在，div 元素的内容是 1500px。因此，如果我们不让父 div 水平滚动，就会破坏应用程序的 ui。因此，我们可以使其可滚动，用户可以滚动查看不可见的内容。
语法用户可以按照以下语法使 div 水平滚动。
.scroll { width:<width_of_div_element>; overflow: scroll; }
在上面的语法中，我们使用了“width”和“overflow”属性来使 div 水平滚动。如果我们不指定元素的宽度，“overflow”属性不会受到影响。
示例 1在下面的示例中，我们创建了 html div 并添加了一些文本内容。在 css 中，我们为 div 元素指定了“500px”固定宽度。此外，我们还设置了“scroll”作为溢出属性的值。
在输出中，用户可以观察到，当文本宽度大于类名为“scroll”的 div 的宽度时，div 元素中出现水平滚动条。
<html><head> <style> .scroll { margin: 5px; padding: 5px; border: 2px solid blue; width: 500px; overflow: scroll; white-space: nowrap; height: 50px; } </style></head><body> <h3>using the <i> overflow-x: scroll </i> to make a div horizontally scrollable using css</h3> <div class = scroll> 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. </div></body></html>
示例 2在下面的示例中，我们使用了“overflow: auto”css 属性来使 div 水平滚动。此外，我们还为 div 元素指定了固定宽度。 ‘auto’和‘scroll’值之间的主要区别是，当我们使用‘scroll’时，div始终保持可滚动，而当我们使用‘auto’时，div元素在发生溢出时变得可滚动。
<html><head> <style> .scroll { border: 2px solid green; width: 500px; overflow: auto; white-space: nowrap; height: 50; } </style></head><body> <h3>using the <i> overflow: auto </i> to make a div horizontally scrollable using css</h3> <div class = scroll> this is a sample text to put in the html div element. you can scroll this div horizontally. </div></body></html>
示例 3在下面的示例中，我们使用了“overflow-x: auto”css 属性来使 div 水平滚动。我们已在父 div 内添加了单个子 div。
在输出中，用户可以观察到，由于我们使用了“auto”值，最初外部 div 是不可滚动的。当我们点击“添加 div”按钮时，它会使用 javascript 将子 div 添加到父 div，并且当您添加 5 到 7 个子 div 时，它会自动变得可滚动。
<html><head> <style> .scroll { border: 2px solid green; width: 500px; overflow-x: auto; white-space: nowrap; display: flex; flex-direction: row; } .inner { max-width: 250px; height: 100px; background-color: red; border: 2px dotted blue; margin: 3px; } </style></head><body> <h3>using the <i> overflow-x: auto </i> to make a div horizontally scrollable using css</h3> <div class = scroll> <div class = inner> inner div </div> </div> <button onclick = adddiv()> add div </button></body><script> function adddiv() { // add the div element to the scroll div let scroll = document.queryselector('.scroll'); let new_div = document.createelement('div'); new_div.classlist.add('inner'); new_div.innerhtml = 'inner div'; scroll.appendchild(new_div); }</script></html>
示例 4在下面的示例中，我们使用 css 设计了滚动条。首先，我们使 div 可以水平滚动以显示滚动条。之后，我们设置滚动条的背景颜色。此外，我们还设计了滚动条轨道和滑块。
在输出中，用户可以观察到好看的滚动条，并根据需求进行设计。
<html><head> <style> .scroll { width: 500px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; border: 1px solid red; scrollbar-width: thin; scrollbar-color: grey; } /* styling the scroll bar */ .scroll::-webkit-scrollbar { width: 10px; height: 10px } .scroll::-webkit-scrollbar-track { background: darkgray;} .scroll::-webkit-scrollbar-thumb { background: grey; border-radius: 10px; } </style></head><body> <h3>using the <i> overflow-x: auto </i> to make a div horizontally scrollable using css</h3> <div class = scroll> 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. </div></body></html>
用户学会了使用 css 的“overflow”属性使 div 水平滚动。在第一个示例中，我们使用了“overflow:scroll”css 属性。在第二个示例中，我们使用了“overflow: auto”css 属性。在第三个示例中，我们使用了“overflow-x: auto”css 属性；在最后一个示例中，我们使用 css 设计了滚动条。
以上就是使用 css 使 div 水平滚动的详细内容。