IT评测·应用市场-qidao123.com

标题: CSS小玩意儿：目次 [打印本页]
作者: 宝塔山    时间: 2025-3-12 22:56
标题: CSS小玩意儿：目次
一，效果


二，代码

第 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 步：添加 - 号的分隔符





欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/) Powered by Discuz! X3.4