Question

据说我的名单越来越多了：

<ul>
  <li>#1</li>
  <li>#2</li>
  <li>#3</li>
  ......
</ul>

我想让它看起来像一个堆栈，这意味着前者将高于后者。例如：

我想我可能要让每个列表项浮动到左边，用left: -5px;之类移动它，并减少z-index，但由于可能有无限数量的项目，我不知道如何用CSS实现所有项目。

谢谢

Answer 1

Float不起作用。根据位置参数和z索引，首先需要两种方法，首先需要绝对（或至少是相对）位置：

<li>

ul {
  list-style: none;
}

li {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 3px solid #fa0;
  border-radius: 50%;
  text-align: center;
  padding: 30px;
  background: #fff;
}

li:nth-child(1) {
  z-index: 3;
  left: 20px;
}

li:nth-child(2) {
  z-index: 2;
  left: 120px;
}

li:nth-child(3) {
  z-index: 1;
  left: 220px;
}

补充/第二解决方案：

如果您可以使用相反方向堆叠的元素（请参阅下面的代码段），这里是一个纯CSS解决方案，您不需要为每个元素设置单独的设置。您需要的唯一内容是每个<ul> <li>#1</li> <li>#2</li> <li>#3</li> </ul>元素中的div：

编辑/一个额外的改变：

要像问题中包含的图片一样实现分层，我颠倒了HTML中的顺序并将li应用于direction: rtl;元素：

ul

ul {
  list-style: none;
  direction: rtl;
  text-align: left;
  padding-left: 40px;
}
li {
 display: inline-block;
  width: 110px;
  height: 100px;
  overflow: visible;
}
li > div {
  width: 90px;
  height: 90px;
  border: 3px solid #fa0;
  border-radius: 50%;
  text-align: center;
  padding: 30px;
  background: #fff;
}

Answer 2

像这样的东西可能有用，虽然它以相反的方式堆叠。

以另一种方式异想地堆叠它需要更多魔法。您可以使用float: right;代替float: left;（稍微）实现它。您的UL将需要一些宽度和/或定位调整。并且它可以在视觉上对LI项目进行反向排序，您可以通过生成列表排序＆＃39;向后排列＆＃39;在HTML中。如果你愿意，我可以帮助你。

＆＃13;

ul {
    display: inline-block
}

li {
    list-style-type: none;
    display: inline-block;
    margin-left: -20px;
    float: right;
    background: red;
    border: 1px solid black;
    padding: 20px;
    border-radius: 100%;
}

＆＃13;

<ul>
  <li>#3</li>
  <li>#2</li>
  <li>#1</li>
</ul>

＆＃13;

Answer 3

我认为这是一个很好的例子：

https://codepen.io/bdpavel/pen/MEJOKz

<强> CSS

ul {
    display: flex;
    padding: 0;
    list-style: none;
}

li {
    display: flex;    
    width: 100px;
    height: 100px;
    margin-left: -40px;
    border: 3px solid orange;
    border-radius: 50%;
    background: white;
    align-items: center;
    justify-content: center;
}

ul li:first-child {
    margin-left: 0;
}

Answer 4

这是一个使用js的小帮助的解决方案。

var lis = document.querySelectorAll('li');
var i = 1;
for (var li of lis) {
  li.style.left = i * 50 + "px";
  li.style.zIndex = lis.length - i;
  i++;
}

ul {
  list-style-type:none;
  position:relative;
}

ul li {
  border:4px solid blue;
  border-radius:50%;
  display:inline-block;
  width:100px;
  height:100px;
  position:absolute;
  background-color:white;
  text-align:right;
  line-height:5em;
  padding:8px;
}

<ul>
  <li>#1</li>
  <li>#2</li>
  <li>#3</li>
</ul>

CSS - 堆栈列表项彼此相同

4 个答案: