Schlaus Schlaus - 1 month ago 14
Sass (Sass) Question

A fixed size row with overlapping elements

What would be the simplest way to create a row of elements which, when they do not fit side-by-side on one row, will overlap each other evenly instead of wrapping?

It should look a bit like this:



ul {
width: 100px;
}

li {
float: left;
}

<ul>
<li>A</li>
<li>A</li>
<li>A</li>
<li>A</li>
</ul>





but with any number of items. This example will eventually wrap, which I don't want. Also, it would be preferable if the elements wouldn't overlap when there's enough space for all of them to be completely visible.

The child elements will be containing images, and will all be of the same size. I'm using a
ul
here for demonstration, but if something else works better than I'm all for it.

Answer

Not perfect, but maybe it is the right way:

ul {
  display: table;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 300px;
  height: 30px;
  overflow: hidden;
  background: orange;
}
li {
  display: table-cell;
  position: relative;
}
li > div {
  position: absolute;
  
  }
<ul>
  <li><div>Content1</div></li>
  <li><div>Content2</div></li>
  <li><div>Content3</div></li>
  <li><div>Content4</div></li>
  <li><div>Content5</div></li>
  <li><div>Content6</div></li>
  <li><div>Content7</div></li>
</ul>

Comments