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

玉

.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 {
    overflow-x: scroll;
    white-space: nowrap;
}

你完成了：

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

Answer 2

只需添加：

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

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

2 个答案: