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

Question

如何添加水平滚动条？

(首先禁用自定义滚动条)

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