拆分< ul>到两列与CSS2 [英] Split <ul> to two columns with CSS2

问题描述

是否有一个很好的跨浏览器解决方案将单个< ul> 分成两列，或者是最好的办法仍然使用两个单独的列表其他？我正在寻找一个单一的解决方案，所以如果它需要替代的HTML，以支持旧的浏览器，则不允许CSS3好。

Is there a good cross browser solution for splitting a single <ul> into two columns, or is the best approach still to use two separate lists floated next to each other? I'm looking for a single solution, so no CSS3 goodness is permitted if it would require alternative HTML to support older browsers.

需要浏览器支持IE7 +，FF3 + p>

Required browser support IE7+, FF3+.

推荐答案

我做了一个JSFiddle与基本的非CSS3似乎工作。应该是跨浏览器，可能是一个很好的基础，让你开始修补一个特定的解决方案。

I made a JSFiddle with basic non-CSS3 that seems to work. Should be cross-browser and might be a good base for you to start tinkering a specific solution.

这里是一个偷看CSS：

Here's a peek at the CSS:

ul {
    width:340px;
    margin:0;
    padding:0;
}

ul:after {
    content:".";
    clear:both;
    height:0;
    display:block;
    visibility:hidden;
}

ul li {
    margin:0 0 0 30px;
    padding:0 0 10px 0;
    float:left;
    display:block;
    width:140px;
}

http://jsfiddle.net/grahamzibar/zdBvk/

这篇关于拆分< ul>到两列与CSS2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！