使无序列表填充2列

时间:2012-04-02 20:18:22

标签: css html-lists

我有一个无序列表,我想填充2列,我刚刚浮动每个项目左边有一个相对位置,但它并不总是最好的。我知道必须有更好的方法。我需要它在大多数浏览器上工作,尽可能使浏览器友好。

这是我目前的代码。

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%;
}

1 个答案:

答案 0 :(得分:2)

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