html - 删除 CSS3 列中不必要的空间

Question

我正在试验 CSS3 中最新的列功能。每个 ul 都有不同的高度，我希望它们在 above 和 below 之间有相等的边距。目前，因为一个 ul 比其余的长得多，它会将第二行向下推。最长的 ul 是否有可能不在其下方强制占用这么多空间？

http://jsfiddle.net/t5ng3/

CSS:

.wrapper {
    background-color: grey;
    max-width: 600px;
    -webkit-column-width: 50%;
}

ul {
    background-color: orange;
    display: inline-block;
    vertical-align: top;
    width: 20%;
}

HTML:

<div class="wrapper">
    <ul>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
    </ul>
    <ul>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
    </ul>
    <ul>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
    </ul>
    <ul>
        <li>Item</li>
        <li>Item</li>
    </ul>
    <ul>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
    </ul>
</div>

Answer 1

那是因为空白，通常会造成4px的偏移量，为了解决这个问题，有多种方法，最便宜的是使用margin-left: -4px; 但如果 font-size > 100% 会失败，另一种方法是在父元素上使用 font-size: 0;，最后一种是通过粘贴 ul 元素从源代码中删除缩进/空白区域..

Demo

你也可以float你的元素到left但是如果你把它们包装在一个容器里会更好 div/section 元素。

---

现在我不确定你是否知道这一点，但你可能想看看 column-count属性将完成类似的工作而不会破坏 ul 元素..