CSS小玩意儿：目次

宝塔山  金牌会员 | 2025-3-12 22:56:36 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 976|帖子 976|积分 2928

一，效果


二，代码

第 1 步：底子结构

创建一个显示内容的框框。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Category List</title>
  6.     <style>
  7.         .category-list-container {
  8.             padding: 0;
  9.             max-width: 300px;
  10.         }
  12.         .category-list {
  13.             list-style: none;
  14.             padding: 0;
  15.             margin: 0;
  16.         }
  18.         .category-item {
  19.             display: flex;  /* 让子元素使用 Flex 布局 */
  20.             justify-content: space-between; /* 让 name 靠左，count 靠右 */
  21.             align-items: center; /* 垂直居中 */
  22.             padding: 8px 0;
  23.             font-size: 16px;
  24.         }
  25.     </style>
  26. </head>
  27. <body>
  28. <div class="category-list-container">
  29.     <ul class="category-list">
  30.         <li class="category-item">
  31.             <span class="name">Category 1</span>
  32.             <span class="count">12</span>
  33.         </li>
  34.         <li class="category-item">
  35.             <span class="name">Category 2</span>
  36.             <span class="count">34</span>
  37.         </li>
  38.     </ul>
  39. </div>
  40. </body>
  41. </html>
复制代码

✅ name 靠左
✅ count 靠右
✅ 但中间没有 - 号填充，下一步解决！
第 2 步：添加 - 号的分隔符

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

宝塔山

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表