Question

我想要显示水平滚动条。我使用过overflow-x:scroll;但我看不到任何水平滚动条。请帮忙。

<div class="abc">
  <p>This is overflow-x scroll. This is overflow-x scroll. This is overflow-x scroll.</p>
</div>
.abc{
  overflow-x:scroll;
  width:1000px;
}

我的代码是here

Answer 1

根据你在jsbin中的代码，试试这个：

.abc{
  overflow-x: auto;
  white-space: nowrap;
}

您可以根据需要保留其中一个“自动”或“滚动” 还有许多其他属性值，请点击此处：http://www.w3schools.com/cssref/pr_pos_overflow.asp

Answer 2

在您的示例中，您应该将内部空格中的空白值设置为nowrap。

看一下html：

<!DOCTYPE html>
<html>
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width">
     <title>JS Bin</title>
   </head>
   <body>
     <div class="a">
       <div class="scrollviewer">
           <p class="datacontainer">This is overflow-x scroll. This is overflow-x scroll. 
           <br/>
           This is overflow-x scroll.This is overflow-x scroll.This is overflow-x scroll.This is overflow-x scroll.This is overflow-x scroll.This is overflow-x scroll.This is overflow-x scroll.This is overflow-x scroll.</p>
       </div>
     </div>
   </body>
 </html>

和css：

.scrollviewer{
   overflow-x: scroll;
   width:100%;
}
.datacontainer{
   white-space: nowrap;
}

水平滚动条缺失

2 个答案: