css - 水平滚动条

Question

如果内容在其边界溢出，如何在我的页面中制作自动水平滚动条。

<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>

如果我的内容中的文字太长，如何制作自动水平滚动条？

score 11 · Accepted Answer

11

插入 div 样式：

overflow-x:scroll;

于 2012-12-18T02:09:43.910 回答

score 11 · Accepted Answer

将您的代码更改为：

 <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>

score 3 · Accepted Answer

3

overflow: auto;
white-space: nowrap;

http://jsfiddle.net/GCPDE/

于 2012-12-18T02:13:11.260 回答

score 1 · Accepted Answer

将您的样式更改为：

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

只是语法不正确的情况。

score 1 · Accepted Answer

注意：为了使文本可以水平滚动，您必须添加 overflow-x:scroll; 溢出-y：隐藏；空白：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>

css - 水平滚动条

5 回答 5

Related

Reference