水平滚动条并禁用垂直滚动

Question

如何添加水平滚动条？

（已禁用cutom滚动条开始）

http://jsfiddle.net/s5ng001z/13/

的HTML

<div style="height:70px; width:200px">
  <div class="scrollbar_content scrollbar-inner">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

的CSS

.scrollbar_content {
    height:100%;
  width:100%;
  min-width:100%;
  overflow-x:scroll;
  overflow-y:hidden;
}

.box {
  display:inline-block;
  margin:2px;
  background:red;
  height:50px;
  width:50px;
}

Answer 1

您需要将此样式white-space: nowrap;添加到.scrollbar_content http://jsfiddle.net/s5ng001z/14/

.scrollbar_content {
    height:100%;
  width:100%;
  min-width:100%;
  overflow-x:scroll;
  overflow-y:hidden;
  white-space: nowrap;        // add this
}

.box {
  display:inline-block;
  margin:2px;
  background:red;
  height:50px;
  width:50px;
}