开发者

How I can do a 2-column list in valid XHTML/CSS?

开发者 https://www.devze.com 2023-01-30 11:53 出处:网络
I have to build a page that has a list that fits in two columns. This list is generated by PHP so needs to be easy to add inputs.

I have to build a page that has a list that fits in two columns. This list is generated by PHP so needs to be easy to add inputs.

It should like to:

* Lorem Ipsum           * Lorem Ipsum
* Lorem Ipsum           * Lorem Ipsum
* Lorem Ipsum           * Lorem Ipsum
* Lorem Ipsum           * Lorem Ipsum
* Lorem Ipsum           * Lorem Ipsum

I would like to know if there is some way to generate this with a basic structure of <ul /> and <li />:

<ul>
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>开发者_运维技巧
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
</ul>

I need to support major browsers (and IE7, 6 not supported).

Thank you in advance!


I have found the solution to this:

ul li {
    margin: 0;
    padding: 0;
    width: 50%;
    float: left;
}


As explained here, a simple way to do that is to give an explicit width to the list and its items and have the items float to the left:

ul {
    width: 700px;
}

li {
    width: 200px;
    float: left;
}


You're looking for the CSS3 multicolumn property. Unfortunately, unlike a lot of the cool features that are provided in the CSS3 specs, hardly any browser supports this as of yet. There is a javascript available though that can make it work in most browsers:

http://www.alistapart.com/articles/css3multicolumn/

0

精彩评论

暂无评论...
验证码 换一张
取 消