logo标签列表

如何将列表项显示为列？

csslistlistviewvertical-alignment
77

我正在尝试构建我的第一个响应式布局。我希望根据宽度以垂直线显示列表项。

<div style="height:800px;">
    <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
       <li>5</li>
       <li>6</li>
       <li>7</li>
    </ul>
</div>

如果浏览器被调整大小，我希望它变成这样:
1  4  7
2  5
3  6

有人能帮帮我吗？我已经尝试了好几个小时，但是没有任何进展。我已经尝试使用表格，但我也无法像那样做。
2
这篇文章可能是你正在寻找的：http://techneblog.com/article/creating-responsive-multiple-column-list - 演示：http://codepen.io/ThiefMaster/full/afGbB （调整窗口大小） - ThiefMaster
7个回答
112

可以很容易地使用CSS3列来完成这个操作。以下是一个示例，HTML代码：

#limheight {
    height: 300px; /*your fixed height*/
    -webkit-column-count: 3;
       -moz-column-count: 3;
            column-count: 3; /*3 in those rules is just placeholder -- can be anything*/
}

#limheight li {
    display: inline-block; /*necessary*/
}
<ul id = "limheight">
 <li><a href="">Glee is awesome 1</a></li>
 <li><a href="">Glee is awesome 2</a></li>
 <li><a href="">Glee is awesome 3</a></li>
 <li><a href="">Glee is awesome 4</a></li>    
 <li><a href="">Glee is awesome 5</a></li>
 <li><a href="">Glee is awesome 6</a></li>
 <li><a href="">Glee is awesome 7</a></li>
 <li><a href="">Glee is awesome 8</a></li>
 <li><a href="">Glee is awesome 9</a></li>
 <li><a href="">Glee is awesome 10</a></li>
 <li><a href="">Glee is awesome 11</a></li>
 <li><a href="">Glee is awesome 12</a></li>    
 <li><a href="">Glee is awesome 13</a></li>
 <li><a href="">Glee is awesome 14</a></li>
 <li><a href="">Glee is awesome 15</a></li>
 <li><a href="">Glee is awesome 16</a></li>
 <li><a href="">Glee is awesome 17</a></li>    
 <li><a href="">Glee is awesome 18</a></li>
 <li><a href="">Glee is awesome 19</a></li>
 <li><a href="">Glee is awesome 20</a></li>
</ul>

4
希望您的受众允许您使用http://caniuse.com/#feat=multicolumn ，因为它显然是最好的解决方案。您还可以为旧浏览器添加一个shim-谷歌搜索http://www.csscripting.com/css-multi-column/；尽管没有测试过。 - ThiefMaster
8
这里似乎不需要为 li 设置 display: inline-block;。 - Dmitry
1
调整大小不起作用。列项目不更改列。除此之外 - 更糟的是 - 如果页面宽度超过6个项目大小，则连续两个项目（1和2）将在第1列的同一行上显示，然后在下一行上显示3和4等。您需要向<li>添加一些水平填充以使其清晰。问题在于inline-block。删除它，您将在Firefox和Chrome中获得三列。 - SPRBRN
1
这里是更新版本：http://jsfiddle.net/Fa722/270/。另外我注意到，如果元素数量不能被列数整除，在调整窗口大小时会出现抖动。（这对@SPRBRN适用） - Francisco Corrales Morales
如果<li>里有一些"非常短的句子"，则可能需要使用 width: 100%。 - Anh-Thi DINH
显示剩余3条评论
24

如果您查看以下示例-它使用固定宽度列，我认为这是所请求的行为。

http://www.vanderlee.com/martijn/demo/column/

如果底部示例与顶部相同，则不需要jquery列插件。

ul{margin:0; padding:0;}

#native {
  -webkit-column-width: 150px;
  -moz-column-width: 150px;
  -o-column-width: 150px;
  -ms-column-width: 150px;
  column-width: 150px;
  
  -webkit-column-rule-style: solid;
  -moz-column-rule-style: solid;
  -o-column-rule-style: solid;
  -ms-column-rule-style: solid;
  column-rule-style: solid;
}
<div id="native">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
  </ul>
</div>

你能否创建一个JSFiddle或CodePen，以便我们可以进行测试？ - Francisco Corrales Morales
难以相信这样一个有效的答案从未得到一票。 - r3wt
4

感谢SPRBRN提供的示例，它对我很有帮助。另外，我可以建议一种基于上面给出的代码使用的mixin：

//multi-column-list( fixed columns width)
  @mixin multi-column-list($column-width, $column-rule-style) {
  -webkit-column-width: $column-width;
  -moz-column-width: $column-width;
  -o-column-width: $column-width;
  -ms-column-width: $column-width;
  column-width: $column-width;

  -webkit-column-rule-style: $column-rule-style;
  -moz-column-rule-style: $column-rule-style;
  -o-column-rule-style: $column-rule-style;
  -ms-column-rule-style: $column-rule-style;
  column-rule-style: $column-rule-style;
 }

使用：

   @include multi-column-list(250px, solid);
2

Use column-width property of css like below 

<ul style="column-width:135px">
2
创建一个列表，包含尽可能多的列表元素。 然后将该列表放入一个div中，并设置style=column-width和style=column-gap，以匹配列表元素中的信息。不要设置style=columns。 完全响应式列表，可以适应屏幕大小。无需插件。
1
您可以按照以下方式使用flex：

.parent-container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    max-height: 100px;
}

根据需要调整max-height属性以生成其他列。
0

CSS：

#cols {
    -moz-column-count: 3;
    -moz-column-gap: 20px;
    -webkit-column-count: 3;
    -webkit-column-gap: 20px;
    column-count: 3;
    column-gap: 20px;
}

HTML

<div id="cols">
    <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
    <li>List item 5</li>
    <li>List item 6</li>
    <li>List item 7</li>
    <li>List item 8</li>
    <li>List item 9</li>
    <li>List item 10</li>
    <li>List item 11</li>
    <li>List item 12</li>
    <li>List item 10</li>
    <li>List item 11</li>
    <li>List item 12</li>
   
    </ul>
</div>

查看演示：https://codepen.io/pen/

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接