CSS 如何将列表项显示为列？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12332528/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display list items as columns?
提问by Grozav Alex Ioan
I'm trying to build my first responsive layout. I want to display list items in a vertical line, depending on width.
我正在尝试构建我的第一个响应式布局。我想根据宽度在垂直线上显示列表项。
<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
If the browser gets resized, I want it to become
如果浏览器调整大小，我希望它变成
1 4 7 2 5 3 6
Can someone help me? I've been trying for hours and I can't get anything. I've tried using tables but I can't do it like that either.
有人能帮我吗？我已经尝试了几个小时，但什么也得不到。我试过使用表格，但我也不能那样做。
回答by Chris
This can be done using CSS3columns quite easily. Here's an example, HTML:
这可以很容易地使用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>回答by SPRBRN
If you take a look at the following example - it uses fixed width columns, and I think this is the behavior requested.
如果您看一下以下示例 - 它使用固定宽度的列，我认为这是请求的行为。
http://www.vanderlee.com/martijn/demo/column/
http://www.vanderlee.com/martijn/demo/column/
If the bottom example is the same as the top, you don't need the jquery column plugin.
如果底部示例与顶部相同，则不需要 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>回答by InaFK
Thank you for this example, SPRBRN. It helped me. And I can suggest the mixin, which I've used based on the code given above:
谢谢你的这个例子，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;
}
Using:
使用：
@include multi-column-list(250px, solid);
回答by Steve Brooker
Create a list with as many list elements as you want. Then enclose the list in a div, setting style=column-width and style=column-gap, to match the information in your list elements. Do not set style=columns. Totally responsive list that adapts to screen size. No plugins required.
创建一个包含任意数量列表元素的列表。然后将列表括在 div 中，设置 style=column-width 和 style=column-gap，以匹配列表元素中的信息。不要设置样式=列。适应屏幕大小的完全响应式列表。不需要插件。
回答by Siddhartha
Use column-width property of css like below
使用 css 的 column-width 属性，如下所示
<ul style="column-width:135px">
回答by Aminul Islam
You can do that using CSS3.
你可以使用 CSS3 做到这一点。
Here is the HTML code snippet:
这是 HTML 代码片段：
<ul id="listitem_ascolun">
<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>
</ul>& Here is the CSS3 code snippet :
& 这里是 CSS3 代码片段：
#listitem_ascolun ul{margin:0;padding:0;list-style:none;}
#listitem_ascolun {
height: 500px;
column-count: 4;
-webkit-column-count: 4;
-moz-column-count: 4;
}
#listitem_ascolun li {
display: inline-block;
}