我想在多列中显示项目列表而不必指定列数,只需让浏览器添加更多列,以便所有项目都适合。
我尝试调整this article,但这些项目只是列为长列,一列列表:
<head>
<STYLE type="text/css">
ul.columns {
float: left;
width: 12em;
margin: 20px 0 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>
任何CSS专家都可以告诉我上面的内容有什么问题?
答案 0 :(得分:2)
我不是专家,但“专栏”拼写错误......
<li class='colums'>
从技术上讲,你的<li>
不需要上课。您可以使用此选择器......
ul.columns li {
float: left;
width: 6em;
margin: 0;
padding: 0;
list-style: none;
}