如何使 div 水平滚动并且其中的元素向左浮动？答案

【问题标题】：How can I make a div scroll horizontally and also have elements inside it float left?如何使 div 水平滚动并且其中的元素向左浮动？
【发布时间】：2015-05-21 15:34:20
【问题描述】：

我有一个类 .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;
}

翡翠

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

【问题讨论】：

标签： html css angularjs pug styling

【解决方案1】：

分配

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

你就完成了：

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

【讨论】：

【解决方案2】：

只需添加：

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

【讨论】：