CODEWITHSUNDEEP
htmlcsssass
Schlaus
Schlaus

Reputation: 19212

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.

Upvotes: 2

Views: 69

Answers (2)

Anton Koning
Anton Koning

Reputation: 386

The only solution that comes to my mind is to use flexbox in this case. Just add the property display: flex; to the parent ul tag and see what's happening with whatever children you add :)

ul {
  width: 100%;
  display: flex;
}
li {
  width: 25%;
}

Upvotes: 1

Andy Tschiersch
Andy Tschiersch

Reputation: 3816

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>

Upvotes: 2

Related Questions