列数将填充底部拆分为下一列

Question

在Chrome和Safari中，列计数将我的列表项的底部填充分割为下一列。 “a”上的Display:inline-block;解决了这个问题，但后来我失去了全角背景悬停效果。

我尝试将填充重写为边距，但由于某种原因，display:block;在计算分割时不计算填充或底部边距。

这个问题是否有解决方法？

Codepen：http://codepen.io/roachdesign/pen/rOqjNM

Answer 1

将break-inside的{​​{1}}规则从ul移至li。

更改此内容：

header nav ul li.menu-item-25 ul {
    ...
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    ...
}

到：

header nav ul li {
    ...
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}

您修改后的代码：http://codepen.io/Abhitalks/pen/YyJNQJ

原因是，您希望列项避免从内部而不是从列容器中断开。