如何将列表项显示为列？

Posted 2023-03-05

【中文标题】如何将列表项显示为列？

【英文标题】：How to display list items as columns?

【发布时间】：2012-09-02 04:31:41

【问题描述】：

我正在尝试构建我的第一个响应式布局。我想在垂直线上显示列表项，具体取决于宽度。

<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 5 2 6 3 7 4

如果浏览器调整大小，我希望它变成

1 4 7 2 5 3 6

有人可以帮助我吗？我已经尝试了几个小时，但我什么也得不到。我尝试过使用表格，但我也不能这样做。

【问题讨论】：

techneblog.com/article/creating-responsive-multiple-column-list 可能是您正在寻找的 - 演示：codepen.io/ThiefMaster/full/afGbB（调整窗口大小）

【参考方案1】：

这可以很容易地使用 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>

【讨论】：

caniuse.com/#feat=multicolumn - 希望您的听众无论如何都允许您使用它；这显然是最好的解决方案。您还可以为旧版浏览器添加 shim - google 吐出 csscripting.com/css-multi-column；虽然没有测试过

@ThiefMaster 是的，如果需要旧版浏览器支持，我认为 javascript 将是实现这一目标的唯一方法。

这里似乎不需要display: inline-block; for li。

调整大小不起作用。列项目不会更改列。除此之外 - 更糟糕的是 - 如果页面宽度超过 6 倍项目大小，两个连续的项目（1 和 2）会在第 1 列的同一行上彼此相邻显示，然后在下一行 3 和 4 上，依此类推。您需要向<li> 添加一些水平填充以明确这一点。问题在于inline-block。删除它，你会得到三列（至少在 Firefox 和 Chrome 中）。

这是一个更新版本：jsfiddle.net/Fa722/270。我还注意到，如果元素的数量不能被列数整除，那么当你重新调整窗口大小时它会抖动。 （这对你有用@SPRBRN）

【参考方案2】：

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

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

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

ulmargin: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 让我们玩吗？

不敢相信如此有效的答案从未获得过一票。

【参考方案3】：

感谢您提供此示例，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);

【参考方案4】：

根据需要创建一个包含尽可能多的列表元素的列表。 然后将列表包含在一个 div 中，设置 style=column-width 和 style=column-gap，以匹配列表元素中的信息。不要设置样式=列。 完全响应的列表，适应屏幕大小。无需插件。

【参考方案5】：

使用 css 的 column-width 属性，如下所示

<ul style="column-width:135px">

【参考方案6】：

你可以像下面这样使用 flex：

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

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

【参考方案7】：

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/