CSS3 列填充不均匀

Question

有关我所说内容的直观引用，请访问以下站点并单击子标题下拉项之一:http://bmgz.rtcgraphics.com/#3

这是一个概念性的问题，但我使用以下 CSS3 声明填写了一组三列:

#bullets {
    position: absolute;
    bottom: 0px;
    left: 0px;
    padding: 20px 10%;
    z-index: 5;
    color: white;
    width: 100%;
    background: rgba(0,0,0,0.4);
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    -webkit-column-width: 23.333%; /* Chrome, Safari, Opera */
    -moz-column-width: 23.333%; /* Firefox */
    column-width: 23.333%;
    -webkit-column-fill: balance; /* Chrome, Safari, Opera */
    -moz-column-fill: balance; /* Firefox */
    column-fill: balance;
    -webkit-column-span: all;
    -moz-column-span: all;
    column-span: all;
}

列填充不均匀。有时列会填满，元素符号落在最后一列中的一组 2、2 和 0 项中。其他时候它将是 4、4、1。

我对浏览器如何决定填充列感到非常困惑。它似乎在所有浏览器中都是一致的。我的目标是让列从左到右水平填充，这样一组 4 个元素将填充 2、1、1

任何和所有指导都会非常有帮助!

谢谢!

Answer 1

找不到这个问题的直接答案，但如果我只是将列表项设置为 float:left 并且具有 width: 33% 的 ul 空间，我得到了我想要的效果。天知道为什么内置的 CSS 列填充如此不均匀。