How TO - 列表组
学习如何使用 CSS 将基本列表转换为“列表组”。
列表组
- Adele
- 艾格尼丝 (Agnes)
- 比利 (Billy)
- 鲍勃 (Bob)
- 卡尔文 (Calvin)
- 克里斯蒂娜 (Christina)
- Cindy
如何创建列表组
步骤 1) 添加 HTML
示例
<ul>
<li>Adele</li>
<li>Agnes</li>
<li>Billy</li>
<li>Bob</li>
<li>Calvin</li>
<li>Christina</li>
<li>Cindy</li>
</ul>
步骤 2) 添加 CSS
示例
ul {
list-style-type: none; /* 移除项目符号 */
padding: 0; /* 移除内边距 */
margin: 0; /* 移除外边距 */
}
ul li {
border: 1px solid #ddd; /* 为每个列表项添加细边框 */
margin-top: -1px; /* 防止双重边框 */
background-color: #f6f6f6; /* 添加灰色背景色 */
padding: 12px; /* 添加一些内边距 */
}
自己动手试一试 »
提示：访问我们的 CSS 列表教程，了解更多关于 HTML 列表以及如何设置其样式。
