CSS: border-bottom на последнем ли в нескольких столбцах ul появляется в неправильном положении

У меня есть <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>

Ответ 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>

Ответ 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>

Ответ 3

Проверьте приведенный ниже код; это может вам помочь. Я проверил этот код; он работает нормально.

<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>