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

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 横向对齐，但当达到屏幕尺寸时会换行。有什么想法吗？

- ardb

Answer 1

我会使用white-space: nowrap和display: inline-block。 实时演示（点击）。

顺便提一句，在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;
}

- m59

---

这对我来说几乎有效，但<h2>总是强制换行。 - Nick.McDermaid

@Nick.McDermaid 这是因为<h2>默认是块级元素。您可以使用自定义CSS将其强制转换为内联元素。https://developer.mozilla.org/zh-CN/docs/Web/HTML/Block-level_elements - dmikester1