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

问题描述

我正在尝试将css3列与列表(<li>)一起使用. 我无法使其正常工作.

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

我定义了一个包裹<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，该效果不佳(将其视为高度).

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

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

Hope it helps anyone in the same boat!

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