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>
相关推荐
华仔啊6 小时前
这个Vue3旋转菜单组件让项目颜值提升200%!支持多种主题,拿来即用
前端·javascript·css
天才测试猿8 小时前
Selenium定位元素的方法css和xpath的区别
css·自动化测试·软件测试·python·selenium·测试工具·测试用例
社恐的下水道蟑螂11 小时前
前端小彩蛋:纯 CSS 实现情侣小球互动,甜到齁的代码我扒下来了
css
UIUV14 小时前
CSS 高级动画学习笔记 —— 从 “亲吻小球” 案例看 CSS 核心技术
前端·css
www_stdio15 小时前
从布局到动效:以水平垂直居中为基础、OOCSS 为架构、协同关键帧为灵魂的 CSS 动画实现(小球亲吻案例全解析)
css·html
新晨43715 小时前
CSS响应式布局卡片
css
上车函予15 小时前
点击即扩散:使用 View Transition API 实现 UnoCSS 官网同款主题切换动画
前端·javascript·css
charlie11451419115 小时前
从模仿到掌握:尝试一下Native CSS手写一个好看的按钮
前端·css·学习·ui
时间的情敌15 小时前
Vue3+CSS 实现3D卡片动画
前端·css·3d
小九今天不码代码15 小时前
CSS技巧:使用 box-shadow + outline 实现多重边框与圆角阴影完美结合
css·outline·box-shadow·多重边框·圆角边框·前端视觉效果·css3技巧