html - 如何使 div 水平滚动并让其中的元素向左浮动？

Question

我有一个类为 .media-record-container 的 div，它包含一堆类为 .media-record 的 div。如果添加的记录多于容纳的记录，我希望容器 div 水平滚动。我通过将 display: inline-block 添加到 .media-record 并将 overflow: auto 添加到 .media-record-container 来实现这一点。现在这是我的问题。我希望 .media-records 全部向左浮动而不是居中，但是如果我添加 float:left，它会强制 .media-record-container div 垂直滚动而不是水平滚动。我该怎么做才能同时实现水平滚动和向左浮动？

CSS

.media-record-container {
  margin-left: 75px;
  float: left;
  width: 90%;
  height: 80px;
  overflow: auto;
}

.media-record {
  height: 60px;
  width: 140px;
  background-color: #8e99a3;
  display: inline-block;
  margin-top: 10px;
  margin-right: 2px;
  border-radius: 5px;
  color: #ffffff;
  padding: 10px;
  line-height: 0%;
  white-space: normal !important;
  font-size: .8em;
}

Jade

.content-wrap.media-record-container.droppableRecord
  .offair.state.content-box.darker-font-color
    article.media-record(ng-repeat="record in mediaRecords")
      p.max-lines(style="white-space:normal") {{record.name}}
      h6.pull-right(ng-click="remove(record)") ×

Answer 1

赋值

.media-record-container {
    overflow-x: scroll;
    white-space: nowrap;
}

你就完成了:

http://codepen.io/anon/pen/rVMGVj