css - 制作一个无序列表填充 2 列

Question

我有一个无序列表，我想填充 2 列，我只是将每个元素 float 到相对位置，但它并不总是最好的。我知道必须有更好的方法。我需要它在大多数浏览器上工作，尽可能对浏览器友好。

这是我当前的代码。

html

<ul class="twocol">
    <li>Great Golf</li>
    <li>Weddings</li>
    <li>Fishing</li>
    <li>History</li>
    <li>Water Sports</li>
    <li>Horseback Riding</li>
    <li>Fishing</li>
    <li>Arts and Theater</li>
    <li>Camping</li>
    <li>Hiking</li>
    <li>Shopping</li>
    <li>Dining</li>
    <li>Antiquing</li>
    <li>Unique Lodging</li>
</ul>

CSS

ul.twocol, ol.twocol
{
    width: 100%;
}

ul.twocol li, ol.twocol li
{
    position: relative;
    float: left;
    width: 50%;
}

Answer 1

也许是一种更好的方法，但也不太受支持，但不确定您的浏览器要求是什么:http://jsfiddle.net/DFJuB/