資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會研究
時尚研究
法律研究如何使用 CSS 將普通列表轉換為“分組列表”？
要建立基本列表，請使用 <ul> 元素。使用 <li> 在 <ul> 中放置列表項。若要將其設為一個分組列表，請使用 CSS 樣式。讓我們看看如何使用 HTML 和 CSS 將基本列表轉換為分組列表。首先，我們將建立一個無序列表。
建立一個無序列表
<ul> 元素用於建立無序列表。列表項使用 <li> 元素設定 -
<ul> <li>Lion</li> <li>Tiger</li> <li>Leopard</li> <li>Cheetah</li> <li>Jaguar</li> <li>Cat</li> <li>Dog</li> </ul>
刪除圓點
若要從無序列表中刪除圓點，請使用值 none 的列表樣式型別屬性。填充和邊距也設定為 0 -
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
設定無序列表的樣式
為無序列表設定一個邊框，使它看起來像一個分組列表。該邊框使用 border 屬性設定 -
ul li {
border: 1px solid rgb(0, 0, 0);
background-color: rgb(246,246,246);;
padding: 12px;
font-size: 18px;
}
示例
若要使用 CSS 將基本列表轉換為“分組列表”，請使用以下程式碼 -
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
* {
box-sizing: border-box;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
ul li {
border: 1px solid rgb(0, 0, 0);
background-color: rgb(246,246,246);
padding: 12px;
font-size: 18px;
}
</style>
</head>
<body>
<h1>List Group Example</h1>
<ul>
<li>Lion</li>
<li>Tiger</li>
<li>Leopard</li>
<li>Cheetah</li>
<li>Jaguar</li>
<li>Cat</li>
<li>Dog</li>
</ul>
</body>
</html>
更新於：2023-12-21
174 次瀏覽
廣告