我怎样才能使 div 水平滚动并让其中的元素向左浮动？

Question

我有一个 div 和 class .media-record-container，其中包含一堆 div 和 class .media-record。如果添加的记录多于容纳的记录，我希望容器 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;
}

翡翠

.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)") &times;

Answer 1

只需添加：

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

Answer 2

分配

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

大功告成：

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

我怎样才能使 div 水平滚动并让其中的元素向左浮动？

How can I make a div scroll horizontally and also have elements inside it float left?

html

css

styling

angularjs

pug