如何 - 列表组
了解如何使用 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 列表以及如何对其进行样式设置。