html - 具有重叠元素的固定大小行

Question

创建一行元素的最简单方法是什么，当它们不能并排放置在一行上时，它们会均匀地相互重叠而不是环绕？

它应该看起来有点像这样:

ul {
  width: 100px;
}

li {
  float: left;
}

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

但可以包含任意数量的元素。这个例子最终会结束，这是我不想要的。另外，当有足够的空间让所有元素完全可见时，如果元素不重叠，那就更好了。

子元素将包含图像，并且大小相同。我在这里使用 ul 进行演示，但如果有其他东西比我更有效，我完全赞成。

Answer 1

并不完美，但也许这是正确的方法:

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>