CSS小玩意儿:目录

一,效果

二,代码

第 1 步:基础布局

创建一个显示内容的框框。

html 复制代码
<!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>

✅ name 靠左

✅ count 靠右

✅ 但中间没有 - 号填充,下一步解决!

第 2 步:添加 - 号的分隔符

👉 在 category-item 内新增 dash 元素,并用 CSS 让它填充 name 和 count 之间的空隙。

html 复制代码
<!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;
        }

        .dash {
            flex-grow: 1; /* 让它填充空隙 */
            text-align: center; /* 让文本居中 */
            color: #999;
            font-weight: bold;
            margin: 0 8px; /* 控制 name 和 count 之间的间距 */
        }
    </style>
</head>
<body>
<div class="category-list-container">
    <ul class="category-list">
        <li class="category-item">
            <span class="name">Category 1</span>
            <span class="dash">-</span>
            <span class="count">12</span>
        </li>
        <li class="category-item">
            <span class="name">Category 2</span>
            <span class="dash">-</span>
            <span class="count">34</span>
        </li>
    </ul>
</div>
</body>
</html>

✅ dash 元素填充了 name 和 count 之间的空间

✅ 但目前 - 号数量固定,如果 name 或 count 变长,- 不会自动填充,下一步解决!

第 3 步:让 - 号自动填充

👉 用 ::before 伪元素,让 dash 内的 - 号动态增长。

html 复制代码
<!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 {
            color: #9a9999;
            list-style: none; /* 去掉默认列表样式 */
            padding: 0;
            margin: 0;
        }

        .category-item {
            display: flex; /* 使用 Flexbox 布局 */
            align-items: center; /* 垂直居中 */
            justify-content: space-between; /* 两端对齐 */
            padding: 8px 0; /* 调整间距 */
            font-size: 16px;
        }

        .name {
            flex-shrink: 0; /* 防止被压缩 */
            transition: transform 0.4s ease-out;
        }

        .dash {
            flex-grow: 1; /* 自动填充空白区域 */
            text-align: center;
            color: #999;
            font-weight: bold;
            margin: 0 8px; /* 控制分隔符与 name 和 count 的间距 */
            overflow: hidden;
            white-space: nowrap;
        }

        /* 伪元素创建动态的 '-' */
        .dash::before {
            content: "------------------------------------------------"; /* 长度足够的 - 号 */
            display: block;
            overflow: hidden;
            white-space: nowrap;
        }

        .count {
            flex-shrink: 0; /* 防止被压缩 */
        }
    </style>
</head>
<body>
<div class="category-list-container">
    <ul class="category-list">
        <li class="category-item">
            <span class="name">Category 1</span>
            <span class="dash"></span>
            <span class="count">2</span>
        </li>
        <li class="category-item">
            <span class="name">Category 2111</span>
            <span class="dash"></span>
            <span class="count">34111111</span>
        </li>
        <li class="category-item">
            <span class="name">Category 3</span>
            <span class="dash"></span>
            <span class="count">56</span>
        </li>
    </ul>
</div>
</body>
</html>
相关推荐
街尾杂货店&13 小时前
css word属性
前端·css
Demoncode_y1 天前
前端布局入门:flex、grid 及其他常用布局
前端·css·布局·flex·grid
CoderYanger1 天前
前端基础——HTML练习项目:填写简历信息
前端·css·职场和发展·html
软件技术NINI1 天前
html css js网页制作成品——饮料官网html+css+js 4页网页设计(4页)附源码
javascript·css·html
软件技术NINI1 天前
html css js网页制作成品——HTML+CSS辣条俱乐部网页设计(5页)附源码
javascript·css·html
金梦人生1 天前
Css性能优化
前端·css
写代码的皮筏艇1 天前
CSS属性继承与特殊值
前端·css
我有一棵树1 天前
使用Flex布局实现多行多列,每个列宽度相同
前端·css·html·scss·flex
Light602 天前
像素退场,曲线登场:现代响应式 CSS 全家桶 | 领码课堂
前端·css·响应式设计·css函数·布局系统·相对单位·设计令牌
速易达网络2 天前
Vue3 原生移动应用开发来了
前端·javascript·css