我正在尝试构建我的第一个响应式布局。我想根据宽度在垂直线上显示列表项。
<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
有人可以帮助我吗?我已经尝试了几个小时,但我什么也得不到。我试过使用表格,但我也不能那样做。
最佳答案
这可以很容易地使用 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>
关于css - 如何将列表项显示为列?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12332528/