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/
精彩评论