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

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