資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 n 列格式中顯示列表？
在本文中，我們將學習如何在 HTML 和 CSS 中使用 columns、column-count 和 grid CSS 屬性將列表以“n”列格式顯示。
以列的形式顯示列表可以是一種節省空間並使資訊更具視覺吸引力的有效方法。我們可以使用不同的方法來實現這一點，這些方法分別依賴於 columns、column-count 和 grid 屬性。
讓我們詳細瞭解每種方法。
方法 1
在這種方法中，我們將使用 column-count CSS 屬性來確定我們將內容分成多少列。讓我們透過一個示例來了解這一點。
示例
檔名：index.html
<html lang="en">
<head>
<title>How to display a list in n columns format?</title>
<style>
ul {
column-count: 3;
}
</style>
</head>
<body>
<h3>How to display a list in n columns format?</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ul>
</body>
</html>
方法 2
在這種方法中，列表項將包裝在具有類 list-container 的容器內。透過使用 CSS Flexbox 屬性（如 display: flex 和 flex-wrap: wrap），列表項將根據可用空間自動流入多列。
示例
檔名：index.html
<html lang="en">
<head>
<title>How to display a list in n columns format?</title>
<style>
.list-container {
display: flex;
flex-wrap: wrap;
}
.list-item {
flex-basis: 33.33%; /* Adjust this value for the desired number of columns */
}
</style>
</head>
<body>
<h3>How to display a list in n columns format?</h3>
<div class="list-container">
<div class="list-item">Item 1</div>
<div class="list-item">Item 2</div>
<div class="list-item">Item 3</div>
<div class="list-item">Item 4</div>
<div class="list-item">Item 5</div>
<div class="list-item">Item 6</div>
<div class="list-item">Item 7</div>
<div class="list-item">Item 8</div>
<div class="list-item">Item 9</div>
<div class="list-item">Item 10</div>
</div>
</body>
</html>
方法 3
在這種方法中，列表項將包裝在具有類 list-container 的容器內。透過利用 CSS Grid 屬性（如 display: grid 和 grid-template-columns），專案將根據指定的列數顯示在多列中。
示例
檔名：index.html
<html lang="en">
<head>
<title>How to display a list in n columns format?</title>
<style>
.list-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Adjust this value for the desired number of columns */
grid-gap: 10px; /* Adjust the gap between items */
}
</style>
</head>
<body>
<h3>How to display a list in n columns format?</h3>
<div class="list-container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
<div>Item 6</div>
<div>Item 7</div>
<div>Item 8</div>
<div>Item 9</div>
<div>Item 10</div>
</div>
</body>
</html>
結論
在本文中，我們學習瞭如何使用 3 種不同的方法將列表以“n”列格式顯示。在第一、第二和第三種方法中，我們使用了 column-count、flexbox 佈局和 grid CSS 屬性將內容分成所需的列數。
更新於： 2023年8月2日
851 次檢視
廣告