響應式 2 列到單列列表

Question

是否可以有一個無序列表，默認情況下顯示為兩列，但通過如下所示的media query響應地更改回單列？

@media (max-width: 640px)

列表中的項目數未知，我想避免使用多個列表（例如以編程方式插入標簽）

Answer 1

是的，這是可能的。

默認情況下將li的width設置為50%並在媒體查詢中float:left （ min-width - 移動優先方法）

 @media (min-width: 640px) { li { width: 50%; float: left } }

 <ul> <li>Foo</li> <li>Foo</li> <li>Foo</li> <li>Foo</li> <li>Foo</li> <li>Foo</li> <li>Foo</li> <li>Foo</li> <li>Foo</li> <li>Foo</li> <li>Foo</li> <li>Foo</li> <li>Foo</li> <li>Foo</li> </ul>

更新 - 您可以使用 flexbox 來實現這一點

 @media (min-width: 640px) { ul { display: flex; flex-wrap: wrap; } li { width: 50% } }

 <ul> <li>Foo</li> <li>Foo</li> <li>Foo</li> <li>Foo</li> <li>Foo</li> <li>Foo</li> <li>Foo</li> <li>Foo</li> <li>Foo</li> <li>Foo</li> <li>Foo</li> <li>Foo</li> <li>Foo</li> <li>Foo</li> </ul>

Answer 2

如果逐行繪制符合您的需求，您可以嘗試使用 flex： http ://codepen.io/anon/pen/Myrwam 或在整個頁面中播放下面的片段，然后將窗口的寬度減小到 639px。

min-width 在這里設置 2 個元素不能站在 1 行上的點。 320px 將斷點設置為 640px，在下面，只有一個可以在那里，它將使用 flex 屬性擴展全寬（grow:1）。

 ul { padding: 0; display: flex; flex-wrap: wrap; } li { display: block; min-width: 320px; width:50%; box-shadow: 0 0 0 2px; flex: 1 0 auto; background:tomato; color:white; font-size:1.5em; text-align:center; } li:nth-child(even) { background:#1975B5; } li { counter-increment: linbr; } li:before { content: counter(linbr); }

 <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>

Answer 3

如果列表的長度是動態的，那么假設您可以使用 PHP 之類的東西控制 HTML 生成是否安全？

如果是這樣，並且如果您實際上希望打破一列而不是將列表 a/bc/d 等分布在兩列上，則可以以編程方式插入

</ul>
<ul>

當您到達列表中點時。 定義 UL 以正常顯示為內聯塊元素，並在小屏幕的媒體查詢中顯示塊元素。 您可能必須在 UL 上設置填充/邊距以使塊之間的空間消失，因此列表在單列布局中看起來是連續的。

Answer 4

與@dippas 示例類似，只是少了一點 CSS，因為默認情況下 li 元素是塊樣式，因此無需設置 width: 100%; 和浮動：無；

只是讓代碼更整潔 (IMO)，如果網站很大，CSS 文件的整體重量會更輕。

 @media (min-width: 640px) { li { float: left; width: 50%; } }

 <ul> <li>Foo</li> <li>Foo</li> <li>Foo</li> <li>Foo</li> <li>Foo</li> <li>Foo</li> <li>Foo</li> <li>Foo</li> <li>Foo</li> <li>Foo</li> <li>Foo</li> <li>Foo</li> <li>Foo</li> <li>Foo</li> </ul>