Question

创建一行元素的最简单方法是什么，当它们并排放在一行上时，它们会相互重叠而不是包裹？

它应该看起来像这样：

ul {
  width: 100px;
}

li {
  float: left;
}

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

但有任意数量的物品。这个例子最终会包装，我不想要。此外，当有足够的空间让所有元素完全可见时，元素不会重叠。

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

Answer 1

不完美，但也许是正确的方式：

＆＃13;

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;
  
  }

＆＃13;

<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>

＆＃13;

Answer 2

我想到的唯一解决方案是在这种情况下使用flexbox。只需将属性display: flex;添加到父ul代码中，看看您添加的孩子会发生什么：）

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

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

2 个答案: