如何将列表项显示为列？

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

<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

有人能帮帮我吗？我试了好几个小时都没有结果。我试过用桌子，但我也做不到。

120838 次浏览
小开
最佳答案

这可以通过使用 CSS3列很容易地完成:

#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>

小开

如果你看一下下面的例子-它使用固定宽度的列，我认为这是要求的行为。

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>

小开

感谢 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);
小开

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

小开

使用 css 的列宽属性，如下面的 

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

你可以使用 flex 如下:

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

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

小开

CSS:

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

超文本标示语言

<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>

检查 demo : < a href = “ https://codepen.io/pen/”rel = “ nofollow norefrer”> https://codepen.io/pen/


提交答案