CSS:多列中最后一个li的border-bottom ul出现在错误的位置

Question

我有<ul>2列.

border-bottom 第一列中的最后一项显示在第二列的顶部.

请参阅小提琴:https://jsfiddle.net/6b7bkomo/

ul {
  column-count: 2;
}

li {
  list-style-type: none;
  border-bottom: 1px solid red;
  box-sizing: border-box;
}

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
  <li>e</li>
  <li>f</li>
  <li>g</li>
</ul>

只发生奇数列表项.在Chrome和Edge中发生,在FireFox中不会发生.

为什么会这样？

我该如何解决？

谢谢!

Answer 1

你必须添加break-inside: avoid-column;到你的<li>元素:

ul {
  -webkit-column-count: 2;
     -moz-column-count: 2;
          column-count: 2;
}  
li {
  break-inside: avoid-column;
  list-style-type: none;
  border-bottom: 1px solid red;
}

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
  <li>e</li>
  <li>f</li>
  <li>g</li>
</ul>

您定义了两列,因此7个<li>元素相等,移动到这两列.第四行从第一列开始到第二列结束(第一列为50%/第二列为50%).

Answer 2

您可以使用column-break-inside内部li元素

ul {
  column-count: 2;
}

li {
  list-style-type: none;
  border-bottom: 1px solid red;
  box-sizing: border-box;
  column-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  break-inside: avoid-column;
}

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
  <li>e</li>
  <li>f</li>
  <li>g</li>
</ul>