CSS小玩意儿：目次
一，效果https://i-blog.csdnimg.cn/direct/00cf5af245f94d08832286f2d9b16f63.png
二，代码
第 1 步：底子结构
创建一个显示内容的框框。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Category List</title>
<style>
.category-list-container {
padding: 0;
max-width: 300px;
}
.category-list {
list-style: none;
padding: 0;
margin: 0;
}
.category-item {
display: flex;/* 让子元素使用 Flex 布局 */
justify-content: space-between; /* 让 name 靠左，count 靠右 */
align-items: center; /* 垂直居中 */
padding: 8px 0;
font-size: 16px;
}
</style>
</head>
<body>
<div class="category-list-container">
<ul class="category-list">
<li class="category-item">
<span class="name">Category 1</span>
<span class="count">12</span>
</li>
<li class="category-item">
<span class="name">Category 2</span>
<span class="count">34</span>
</li>
</ul>
</div>
</body>
</html>
https://i-blog.csdnimg.cn/direct/deb70fbe84774f8b9520d91135feefb8.png
✅ name 靠左
✅ count 靠右
✅ 但中间没有 - 号填充，下一步解决！
第 2 步：添加 - 号的分隔符
页:
[1]