Question

我将li元素划分为两列，我想在两列中添加box-shadow，但是box-shadow不适合我创建的两列，这是我尝试的：

.ul1 {
  column-count: 2;
  column-gap: 0px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.li1 {
  border: 1px solid blue;
  border-bottom: 0px;
  list-style: none;
}

.li1:nth-child(-n+5) {
  border-right: 0px;
}

.ul1 li:last-child,
.ul1 li:nth-child(5) {
  border-bottom: 1px solid blue;
}

<ul class="ul1">
  <li class="li1">Test</li>
  <li class="li1">Test</li>
  <li class="li1">Test</li>
  <li class="li1">Test</li>
  <li class="li1">Test</li>
  <li class="li1">Test</li>
  <li class="li1">Test</li>
  <li class="li1">Test</li>
  <li class="li1">Test</li>
  <li class="li1">Test</li>
</ul>

我不知道为什么会发生这种情况，我曾尝试设置fix-height，但是它不起作用，我可以使用一些指导和建议来解决

Answer 1

添加此CSS：

.ul1 {
  padding: 0;
}

Answer 2

尝试

    ul {
    padding-left: 0px;
}

，您不需要这样的类名，可以通过标记名或类似的名称来获取样式。

谢谢

如何适合框阴影<li>元素

2 个答案: