Split to two columns with CSS2

问题:

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.

Required browser support IE7+, FF3+.

回答1:

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.

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/