CSS3列切断<li> s

Question

我正在尝试使用带有list(<li>)的css3列.我无法使其正常工作.

我定义了一个包装的div <ul>

div.ul-container {
  -moz-column-width: 310px;
  -moz-column-gap: 10px;
  -webkit-column-width: 310px;
  -webkit-column-gap: 10px;
  column-width: 310px;
  column-gap: 10px;
}

当我有三个<li>或更多时,这工作正常.但当我少于(2或1)它似乎切断了<li>.我尝试定义一个min-height不起作用的(它将其视为高度).

截图:

有任何想法吗？

Answer 1

这个帖子有点老了,但我最近遇到了同样的问题并用它来防止列表项被删除:

li {
-webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
}

有关CSS-Tricks的更多信息

希望它可以帮助同一条船上的任何人!