CSS3列切断< li> [英] CSS3 columns cutting off <li>s

问题描述

我试图使用列表（< li> ）的css3列。
我遇到麻烦使它工作。

I am trying to use css3 columns with a list (<li>). I am in trouble makeing it work.

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

I defined a div that wraps the <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> ; s或以上。但是当我少于那个（2或1），它似乎切断了< li> 。我尝试定义一个 min-height ，它不工作（它被视为height）。

This works fine when I have three <li>s or above. But when I have less than that (2 or 1) it seems to cut off the <li>. I tried defining a min-height which didn't work as well (it treated it as height).

屏幕截图：

任何想法？

推荐答案

这个线程有点旧，最近发生了相同的问题，并使用此来防止列表项被剪切：

This thread is a bit old, but I had the same issue recently and used this to prevent the list items from getting cut:

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

有关 CSS-Tricks

希望它帮助同一艘船上的任何人！

Hope it helps anyone in the same boat!

这篇关于CSS3列切断< li>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！