CSS：多列中最后一个li的边框底部ul出现在错误的位置

我有两列的

第一列中最后一项的

边框底部将显示在第二列的顶部

参见小提琴：


ul{
列数：2；
}
李{
列表样式类型：无；
边框底部：1px纯红；
框大小：边框框；
}

a
b
c
d
e
f
g
您必须添加
内部中断：避免列到您的
元素：


ul{
-webkit列数：2；
-moz列数：2；
列数：2；
}  
李{
内破：避开立柱；
列表样式类型：无；
边框底部：1px纯红；
}

a
b
c
d
e
f
g
您可以在
元素中使用
列分隔符


ul{
列数：2；
}
李{
列表样式类型：无；
边框底部：1px纯红；
框大小：边框框；
内柱断裂：避免；
-webkit列内部中断：避免；
内破：避开立柱；
}

a
b
c
d
e
f
g

检查下面的代码；这可能对你有帮助。我检查了这个代码；它正在工作
好的


.菜单
{
列数：2；
}
李先生
{
列表样式类型：无；
边框底部：1px纯红；
框大小：边框框；
-webkit列内部中断：避免；
-莫兹柱内折：避免；
-moz内部分页符：避免；
内部分页符：避免；
内破：避开立柱；
}

a
b
c
d
e
f
g

请阅读。所有相关代码都直接属于您的问题。请将相关代码添加为一个片段，编辑器中有一个用于此目的的工具，其中包含-SYMBOL或的可能重复项
<style>
.menus 
{
    column-count: 2;
}

.menus li 
{
    list-style-type: none;
    border-bottom: 1px solid red;
    box-sizing: border-box;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside:avoid;
    -moz-page-break-inside:avoid;
    page-break-inside: avoid;
    break-inside: avoid-column;
  }
</style>

<ul class="menus">
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
  <li>e</li>
  <li>f</li>
  <li>g</li>
</ul>