資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何將無序列表顯示為兩列？
在 HTML 中，無序列表是專案的集合，這些專案不必按照任何特定順序排列。為了列出這些專案，我們經常使用簡單的專案符號，因此它們通常被稱為專案符號列表。無序列表以 <ul> 標記開頭，以 </ul> 標記結束。列表項以 <li> 標記開頭，以 </li> 標記結束。
<ul> 標記代表無序列表，它是 li 標記的父級。這意味著 <li> 標記是 <ul> 標記的子級。以下是語法
<ul>List of Items</ul>
專案符號列表可以有 4 種類型：disc、circle、square 和 none。這可以透過 <ul> 標記內的 type 屬性或 CSS list-style-type 屬性來指定。無序列表的預設外觀如下所示。
示例
<!DOCTYPE html>
<html>
<head>
<title>An example of a simple unordered list</title>
</head>
<body>
<p>Vegetables</p>
<ul>
<li>Capsicum</li>
<li>Brinjal</li>
<li>Onion</li>
<li>Tomato</li>
</ul>
</body>
</html>
我們可以看到，預設情況下，列表項顯示在一列中。但是，我們可以更改此設定，並使用 CSS 樣式屬性將列表顯示為兩列或更多列。
使用“column-width” 和“column-count” 屬性
“column-width” 屬性定義理想的列寬，由
為了建立通用的多列布局，我們可以同時使用 column-count 和 column-width。column-count 指定最大列數，而 column-width 指定每列的最小寬度。透過組合這些屬性，多列布局將在窄瀏覽器寬度下自動摺疊成一列，從而無需媒體查詢或其他規則。
“column-count” 屬性
“column-count” 屬性指定元素內容應流入的最佳列數，以 <integer> 表示或使用關鍵字 auto。如果此值和列寬都不為 auto，則它僅表示可以使用最大列數。與 column-width 屬性相反，此屬性無論瀏覽器寬度如何都保留列數。
示例
在下面的示例中，我們將透過使用 CSS 的“column-count” 屬性指定列數來建立一個包含兩列的有序列表。
<!DOCTYPE html>
<html>
<head>
<title>How to Display Unordered List in Two Columns?</title>
<style>
ul {
column-count: 2;
column-gap:20px;
}
div{
background-color:seashell;
color:palevioletred;
border:2px solid mistyrose;
border-radius:10px;
height:180px;
width:520px;
padding:5px;
margin:10px;
}
li{
padding:2px;
}
</style>
</head>
<body>
<h4>Top Engineering Colleges in Hyderabad</h4>
<div>
<ul type="square">
<li>IIT Hyderabad</li>
<li>IIT Hyderabad</li>
<li>Jawaharlal Nehru Institute of Technology</li>
<li>Osmania University</li>
<li>Chaitanya Bharati Institute of Technology</li>
<li>VNR/ VJIET Hyderabad</li>
<li>Vasavi College of Engineering</li>
<li>Sreenidhi Institute of Technology</li>
<li>Gokaraju Rangaraju Institute of Technology</li>
<li>G. Nayarayanamma Institute of Technology</li>
</ul>
</div>
</body>
</html>
使用“columns” 屬性
columns CSS 簡寫屬性指定在繪製元素內容時要使用的列數，以及這些列的寬度。此屬性是 CSS 屬性 column-count 和 column width 的簡寫。它接受 column-count、column-width 或這兩個屬性。
columns: auto|column-width column-count;
“Auto” 將 column-width 和 column-count 值設定為其瀏覽器預設值。
示例
在下面的示例中，我們將透過使用 CSS 的“columns” 屬性指定列數來建立一個包含兩列的有序列表。
<!DOCTYPE html>
<html>
<head>
<title>How to Display Unordered List in Two Columns?</title>
<style>
ul {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
}
div{
background-color:papayawhip;
color:saddlebrown;
border-radius:20px;
height:180px;
padding:5px;
width:550px;
}
li{
padding:2px;
}
</style>
</head>
<body>
<h4>Top Engineering Colleges in Hyderabad</h4>
<div>
<ul type="circle">
<li>IIT Hyderabad</li>
<li>IIT Hyderabad</li>
<li>Jawaharlal Nehru Institute of Technology</li>
<li>Osmania University</li>
<li>Chaitanya Bharati Institute of Technology</li>
<li>VNR/ VJIET Hyderabad</li>
<li>Vasavi College of Engineering</li>
<li>Sreenidhi Institute of Technology</li>
<li>Gokaraju Rangaraju Institute of Technology</li>
<li>G. Nayarayanamma Institute of Technology</li>
</ul>
</div>
</body>
</html>
4K+ 次瀏覽
