Display items in columns dynamically?
I'd like to display a list of items in multiple columns without having to specify the number of columns, and just let the browser add more columns so that all items fit.
I tried to adapt this article, but the items are just listed as a long, one-column list:
<head>
<STYLE type="text/css">
ul.columns {
float: left;
width: 12em;
margin: 20px 0 开发者_C百科1em;
padding: 0;
list-style: none;
}
li.columns {
float: left;
width: 6em;
margin: 0;
padding: 0;
list-style: none;
}
</STYLE>
</head>
<body>
<ul class="columns">
<li class='colums'>test</li>
<li class='colums'>test</li>
<li class='colums'>test</li>
<li class='colums'>test</li>
<li class='colums'>test</li>
</ul>
Any CSS expert could tell me what's wrong with the above?
I am no expert, but "columns" is mis-spelled...
<li class='colums'>
Technically, your <li>s do not need a class. You can use this selector instead...
ul.columns li {
float: left;
width: 6em;
margin: 0;
padding: 0;
list-style: none;
}
加载中,请稍侯......
精彩评论