如何强制 HTML 元素左对齐而不换行

Question

我的问题与 Force float left with no line break no matter what 但我没有使用表格

我有以下布局（缩短）

<div>
<span>
item1
</span>
<span>
item1
</span>
<span>
item1
</span>    
</div>

没有别的。 CSS 浮动每个 span 元素，我希望有一个长的单行项目水平浮动。

我遇到的问题是，一旦元素到达页面末尾，它就会换行。我宁愿页面的宽度扩展。

为了模拟这个，我将我的 span 包裹在 div 中：

div {
  max-width:350px;
  white-space:nowrap;
  overflow:scroll;
}


span{
  float:left;
  width:200px;
  margin:10px;
  background-color:#fe3e4a;
}

根据其他帖子，我还包含了 white-space:nowrap 属性。

我看到的是：

item1
item1
item1
item1  
etc

或（取决于父级的宽度div或每个跨度的宽度）

item1    item1    item1
item1    etc

我想要实现的是（没有换行但有滚动条）

item1    item1    item1    item1    item1    item1    item1    item1    item1    item1    item1    item1    etc

我做错了什么？

Answer 1

white-space: nowrap; 仅适用于 inline 和 inline-block 元素

如果您从 span 中删除浮动并显示内联块，它会按预期工作！

span{ float: none; // don't really need this line, just remove the float! display: inline-block; }

您的 fiddle https://jsfiddle.net/w3uk99gz/

的更新版本

更新： 是的你可以使用 divs 而不是 spans.

这是一个使用不同类型元素的示例：https://jsfiddle.net/w3uk99gz/2/ 一起使用

Answer 2

您不需要 float span（浮动容器 wraps）- 删除它并设置为内联 display。请参阅下面的演示，我将 span 设置为 inline-block:

div {
  max-width: 350px;
  white-space: nowrap;
  overflow-y: scroll;
}

span {
  /*float: left;*/
  display: inline-block; /* ADDED */
  width: 200px;
  margin: 10px;
  background-color: #fe3e4a;
}

<div>
  <span>item1</span>
  <span>item1</span>
  <span>item1</span>
  <span>item1</span>
  <span>item1</span>
  <span>item1</span>
  <span>item1</span>
  <span>item1</span>
</div>

Answer 3

我会使用弹性解决方案 - 在 css 的这个时代我们不需要浮动任何东西：

div {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

<div>
  <span>item1</span>
  <span>item1</span>
  <span>item1</span>
  <span>item1</span>
  <span>item1</span>
  <span>item1</span>
  <span>item1</span>
  <span>item1</span>
  <span>item1</span>
  <span>item1</span>
  <span>item1</span>
  <span>item1</span>
  <span>item1</span>
  <span>item1</span>
  <span>item1</span>
  <span>item1</span>
  <span>item1</span>
  <span>item1</span>
  <span>item1</span>
  <span>item1</span>
  <span>item1</span>
</div>

如何强制 HTML 元素左对齐而不换行

How to force HTML elements to be left aligned and not wrap

html

css

whitespace

css-float