如何将列表项显示为列？

小编典典

如何将列表项显示为列？

css

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

<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

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

阅读 304

2020-05-16

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

2020-05-16