CSS中的水平滚动条 [英] Horizontal scroller in CSS

问题描述

我一直在尝试向我的上下文部分添加滚动条，只允许框在查看器屏幕的可见范围内水平滚动，而不是垂直滚动。

有没有人知道任何代码在一个流体CSS布局设计中的div中有可滚动内容？

此外，这里是一个链接到一个网站，我要重新创建： http://patrickhoelck.com/home.html

解决方案

您可能想看看 overflow-x：scroll ，如果内容太宽，它将在父项上设置固定大小，强制使用水平滚动条。 p>

一些示例html：

 < div style =width：50px ; overflow-x：scroll> 
< p> Hello world！< / p> 
< p>这是一个带有水平滚动条的div！< / p> 
< / div> 
  

I have been trying to add a scroller to my context section that will only allow the box to scroll horizontally within the visible of the viewer's screen, not vertical.

Does anyone know any code to have scrollable content in a div in a fluid css layout design?

Also, here is a link to a website that has the exact scroll effect I am trying to recreate: http://patrickhoelck.com/home.html

解决方案

You probably want to take a look at overflow-x: scroll, which, along with setting a fixed size on the parent, will force a horizontal scrollbar if the content is too wide.

Some example html:

<div style="width: 50px; overflow-x: scroll">
    <p>Hello world!</p>
    <p>Here is a div with a horizontal scrollbar!</p>
</div>

这篇关于CSS中的水平滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！