代码之家 › 专栏 › 技术社区 › MyDaftQuestions

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

whitespace css-float css html

1

MyDaftQuestions · 技术社区 · 9 年前

我的问题与 Force float left with no line break no matter what 但我不用桌子

我有一个以下布局(缩短)

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

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

我做错了什么?

3 回复 | 直到 9 年前

1

Sam 9 年前

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/

2

1

kukkuz 9 年前

你不需要浮动 span (浮动容器包裹 )-将其移除并设置为和内联 display 跨度 到 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>

3

1

Pete Irfan TahirKheli 9 年前

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>