如何使元素与溢出保持在同一行

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