相关疑难解决方法(0)

请考虑以下HTML:

<div class='x'>
    <ul>
        <li>Number one</li>
        <li>Number two</li>
        <li>Number three</li>
        <li>Number four is a bit longer</li>
        <li>Number five</li>
    </ul>
</div>

和以下CSS:

.x {
    -moz-column-count: 3;
    column-count: 3;
    width: 30em;
}

目前,Firefox目前的渲染类似于以下内容:

• Number one    • Number three          bit longer
• Number two    • Number four is a    • Number five

请注意,第四个项目在第二列和第三列之间分开.我该如何预防呢？

所需的渲染可能看起来更像:

• Number one    • Number four is a
• Number two      bit longer
• Number three  • Number five

要么

• Number one    • Number three        • Number …