如何强制HTML元素保持对齐且不自动换行

Question

My question is very similar to Force float left with no line break no matter what but I'm not using tables

https://jsfiddle.net/hkzvo8h7/

I have a the following layout (shortened)

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

Nothing else. The CSS floats each span element and I'm hoping to have a long, single row of items floating horizontally.

The issue I have is, as soon as the element reaches the end of the page, it wraps. I would rather the page's width extends.

To simulate this, I've wrapped my span in a div :

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


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

As per other posts, I've also included the white-space:nowrap attribute.

What I'm seeing is:

item1
item1
item1
item1  
etc

or (depending on the width of the parent div or width of each span)

item1    item1    item1
item1    etc

where as what I'm trying to achieve is (with no wrap but with scroll bar)

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

What have I done wrong?

Answer 1

white-space: nowrap; only works with inline and inline-block elements

if you remove the floats from the spans and display inline-block it works as intended!

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

An updated version of your fiddle https://jsfiddle.net/w3uk99gz/

Update: Yes you can use div s instead of span s.

This is an example using different types of elements: https://jsfiddle.net/w3uk99gz/2/ all together

Answer 2

You don't need to float the span (floating containers wraps ) - remove it and set to and inline display . See demo below where I have set span to 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

I would use a flex solution - we shouldn't need to float anything in this day and age of 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>