logo标签列表

水平滚动条

csshtmlscrollbar
6
我应该如何在内容溢出其边界时，在我的页面上制作自动水平滚动条呢？
<html>
     <body>
        <div style ="width: 20px; height:30px; border:1px solid black; overflow:auto">
            <!-- various of text here that can makes it go out the border-->
        </div>  
     </body>
</html>

如果我的内容太长，该怎么办才能实现自动水平滚动条？
5个回答
11

插入在div样式中：

overflow-x:scroll;
w3schools 指出，这在 IE 8.0 及更早版本上无法正常工作。 - bonsaiviking
1
@bonsaiviking：离题了，再也不要引用那个网站了，请先阅读这个网站（http://w3fools.com/）。 - Shomz
11

将您的代码更改为以下内容：

 <html>
 <body>
    <div style ="width: 20px; height:30px; border:1px solid black; overflow-x:scroll">
        <!-- various of text here that can makes it go out the border-->
    </div>  
 </body>
 </html>
3
1
注意：为了使文本水平滚动，您需要将 overflow-x:scroll; overflow-y: hidden; white-space: nowrap; 添加到您的 div 中。 

<html>
     <body>
        <div style ="width:20px; height:30px; border:1px solid black; overflow-x:scroll; overflow-y:hidden; white-space:nowrap;">
            <!-- various of text here that can makes it go out the border-->
        </div>  
     </body>
</html>

1

将您的样式更改为这个：

style="width: 20px; height:30px; border:1px solid black; overflow:auto;"

只是语法错误的情况。

噢，好吧，看起来你原帖的编辑版本现在是正确的了。 - sooper
哦，我编辑了问题 - 我以为那是一个打字错误而不是确切的代码。 - Shomz
同意，我想我会放弃它，因为clyfish已经在上面添加了它。 - sooper
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接