缺少水平滚动条

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

您可以根据需要保留其中之一 'auto' 或 'scroll'。
还有许多其他属性值，请在此处查看：http://www.w3schools.com/cssref/pr_pos_overflow.asp

Answer 2

在您的示例中，您应该将 white-space 值设置为 nowrap in your inner div.

看看 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;
}

缺少水平滚动条

Horizontal Scrollbar missing

html

css

horizontal-scrolling