Question

我是HTML和CSS的新手并尝试了一些工作。我试图从底部到顶部堆叠li并成功。但现在的问题是，当我在运行时删除底部li时，其他的li固定在他们自己的位置。而我想要的是将其他李自动转移到底部。 Click for Jsfiddle Link of my work

<div>
  <div class="name">Name</div>
  <div class="value">Value</div>
  <div class="name">Name</div>
  <div class="value">Value</div>
</div>

任何人都可以帮忙..我真的很感激..谢谢

Answer 1

你不需要javascript来做这件事...... flexbox可以原生地做到这一点。

.lt {
  border: 1px solid grey;
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.list-style-none {
  list-style: none;
}
.list-style-none li {} #switch:checked ~ .lt > ul > li:last-child {
  display: none!important;
}

<input type="checkbox" id="switch" />
<label for="switch">Click This</label>

<div class="lt">
  <ul class="list-style-none">
    <li><a href="">A</a>
    </li>
    <li><a href="">B</a>
    </li>
    <li><a href="">C</a>
    </li>
    <li><a href="">D</a>
    </li>
    <li><a href="">E</a>
    </li>
  </ul>
</div>

Answer 2

我在这里写了一个演示。

<div class="lt" align="left">
  <ul class="list-style-none">
    <li><a href="">A</a></li>
    <li><a href="">B</a></li>
    <li><a href="">C</a></li>
    <li><a href="">D</a></li>
    <li><a href="">E</a></li>
  </ul>
</div>

https://jsfiddle.net/qmt5o1so/

我不知道你是如何触发删除最后一个li的，所以我在这里使用MutationObserver。

如果你不知道它是什么，你可以忽略它，它只是一种检测DOM变化的方法。

PS：我不知道为什么演示中存在一些偏差像素。

当移除底部li时自动在底部制作其他li

2 个答案: