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{ float: none; // don't really need this line, just remove the float! display: inline-block; }

您的小提琴的更新版本https://jsfiddle.net/w3uk99gz/

更新： 是您可以使用div代替span s。

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

Answer 2

您不需要浮动 span（浮动容器换行） - 将其删除并设置为 inline 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

我会使用flex解决方案 - 我们不应该在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元素左对齐而不是换行

3 个答案: