如何将元素保持在溢出的同一行上

Question

我正在尝试制作一个页面，其中一些div水平对齐，我希望宽度根据内容调整大小，所以如果内容大于屏幕大小，我会得到水平滚动。我有这个：

    <div>
    <div style="width: 300px; height: 300px; background-color: black; margin-left: 10px; float: left;"></div>
    <div style="width: 300px; height: 300px; background-color: black; margin-left: 10px; float: left;"></div>
    <div style="width: 300px; height: 300px; background-color: black; margin-left: 10px; float: left;"></div>
    <div style="width: 300px; height: 300px; background-color: black; margin-left: 10px; float: left;"></div>
    <div style="width: 300px; height: 300px; background-color: black; margin-left: 10px; float: left;"></div>
</div>

子div正在并排排列，但是当达到屏幕尺寸时，它会分成一个新行。有什么想法吗？

Answer 1

我会将white-space: nowrap与display: inline-block一起使用。的 Live demo (click).

顺便说一句，尝试在HTML中使用CSS而不是内联样式。除非绝对必要，否则应避免使用内联样式。

<div class="row">
  <div></div>
  <div></div>
  <div></div>
  <div></div>

CSS：

.row {
  white-space: nowrap;
}

.row > div {
  width: 300px;
  display: inline-block;
}