如何使用 CSS3 將列表項目顯示為列？

使用 CSS3 列將清單項目顯示為列

您可以根據螢幕尺寸以行或列形式顯示清單嗎？這是響應式網頁設計常見的挑戰。雖然表格是一種選擇，但 CSS3 以其 columns 屬性提供了更優雅的解決方案。

以下是HTML 結構範例：

<div>
<p>要將這些清單項目顯示為列，請新增下列CSS :</p>
<pre class="brush:php;toolbar:false">#limheight {
  height: 300px; /* Your fixed height */
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3; /* Number of columns */
}

#limheight li {
  display: inline-block; /* Necessary */
}

結果將會是三列清單項，如圖所示：

1   4   7
2   5   8
3   6   9

調整column-count值以變更列數。為了提高回應速度，您可以使用媒體查詢根據螢幕尺寸在單列和多列佈局之間切換。