如何将列表项显示为列？

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 52 63 74如果浏览器调整大小，我希望它成为1 4 72 53 6有人能帮我吗？我已经尝试了几个小时，却什么也没得到。我试过使用表，但我也不能那样做。

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

Answer 2

谢谢您提供的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);