动态显示列中的项目?

时间:2010-08-10 13:17:12

标签: css

我想在多列中显示项目列表而不必指定列数,只需让浏览器添加更多列,以便所有项目都适合。

我尝试调整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专家都可以告诉我上面的内容有什么问题?

1 个答案:

答案 0 :(得分:2)

我不是专家,但“专栏”拼写错误......

<li class='colums'>

从技术上讲,你的<li>不需要上课。您可以使用此选择器......

ul.columns li {
  float: left; 
  width: 6em; 
  margin: 0; 
  padding: 0; 
  list-style: none; 
}