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

Posted 2023-03-06

【中文标题】如何使元素与溢出保持在同一行

【英文标题】：How to keep elements on same line with overflow

【发布时间】：2014-04-21 15:55:29

【问题描述】：

我正在尝试制作一个页面，其中一些 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 并排对齐，但当达到屏幕尺寸时，它会换行。有什么想法吗？

【参考方案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;

【讨论】：

这几乎对我有用，但

@Nick.McDermaid 那是因为<h2>默认是块级元素。您应该能够强制它与自定义 css 内联。 developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements