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>