如何将列表项显示为列？

Question

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

<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

有人能帮我吗？我已经尝试了几个小时，却什么也没得到。我试过使用表，但我也不能那样做。

Answer 1

使用CSS3列可以很容易地做到这一点。这是一个示例，HTML：#limheight {&nbsp; &nbsp; height: 300px; /*your fixed height*/&nbsp; &nbsp; -webkit-column-count: 3;&nbsp; &nbsp; &nbsp; &nbsp;-moz-column-count: 3;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; column-count: 3; /*3 in those rules is just placeholder -- can be anything*/}#limheight li {&nbsp; &nbsp; display: inline-block; /*necessary*/}<ul id = "limheight">&nbsp;<li><a href="">Glee is awesome 1</a></li>&nbsp;<li><a href="">Glee is awesome 2</a></li>&nbsp;<li><a href="">Glee is awesome 3</a></li>&nbsp;<li><a href="">Glee is awesome 4</a></li>&nbsp; &nbsp;&nbsp;&nbsp;<li><a href="">Glee is awesome 5</a></li>&nbsp;<li><a href="">Glee is awesome 6</a></li>&nbsp;<li><a href="">Glee is awesome 7</a></li>&nbsp;<li><a href="">Glee is awesome 8</a></li>&nbsp;<li><a href="">Glee is awesome 9</a></li>&nbsp;<li><a href="">Glee is awesome 10</a></li>&nbsp;<li><a href="">Glee is awesome 11</a></li>&nbsp;<li><a href="">Glee is awesome 12</a></li>&nbsp; &nbsp;&nbsp;&nbsp;<li><a href="">Glee is awesome 13</a></li>&nbsp;<li><a href="">Glee is awesome 14</a></li>&nbsp;<li><a href="">Glee is awesome 15</a></li>&nbsp;<li><a href="">Glee is awesome 16</a></li>&nbsp;<li><a href="">Glee is awesome 17</a></li>&nbsp; &nbsp;&nbsp;&nbsp;<li><a href="">Glee is awesome 18</a></li>&nbsp;<li><a href="">Glee is awesome 19</a></li>&nbsp;<li><a href="">Glee is awesome 20</a></li></ul>

Answer 2

谢谢您提供的SPRBRN示例。它帮助了我。我可以建议我根据上面给出的代码使用的mixin：//multi-column-list( fixed columns width)&nbsp; @mixin multi-column-list($column-width, $column-rule-style) {&nbsp; -webkit-column-width: $column-width;&nbsp; -moz-column-width: $column-width;&nbsp; -o-column-width: $column-width;&nbsp; -ms-column-width: $column-width;&nbsp; column-width: $column-width;&nbsp; -webkit-column-rule-style: $column-rule-style;&nbsp; -moz-column-rule-style: $column-rule-style;&nbsp; -o-column-rule-style: $column-rule-style;&nbsp; -ms-column-rule-style: $column-rule-style;&nbsp; column-rule-style: $column-rule-style;&nbsp;}使用方法：&nbsp; &nbsp;@include multi-column-list(250px, solid);