时间戳

首页 > 解决方案 > 如何在 CSS 中创建进度步骤

css - 如何在 CSS 中创建进度步骤

问题描述

我有一个项目列表，我想在 CSS 中将其转化为进度步骤。

ol {
  width: 800px;
}
li {
  display: inline-block;
  color: transparent;
  height: 25px;
  width: 25px;
  background-color: #abc;
  border-radius: 50%;
  border: 2px solid #08f;
  margin-right: 150px;
}

li:last-child {
  margin-right: 0;
}

li:not(:last-child)::before {
  content: "";
  border: 2px solid #08f;
  margin-left:25px;
  width: 153px;
  display: inline-block;
}
<ol>
  <li>Step 1</li>
  <li>Step 2</li>
  <li>Step 3</li>
  <li>Step 4</li>
</ol>

我理想地想做的是：

我只是想教自己一些更高级的 CSS，而且我已经在其他地方看到过这种模式 - 但我已经尝试了一个小时左右才到达那里，没有任何乐趣。

这对我来说是一个学习练习，所以如果你有时间，我会喜欢答案的一些解释。

谢谢，

标签： css

解决方案

body {
    display:     grid;
    place-items: center;
    margin:      0;
    padding:     36px;
}

ol {
    display: flex;
    width:   80%;
    padding: 12px 0;
}

li {
    position:    relative;
    padding:     0;
    flex-grow:   1;
    height:      2px;
    background:  #08f;
    display:     flex;
    align-items: center;
}

li:last-child {
    margin-right: 0;
    flex-grow:    0;
}

li::after {
    content:       "";
    position:      absolute;
    left:          0;
    display:       inline-block;
    color:         transparent;
    height:        24px;
    width:         24px;
    background:    #abc;
    border-radius: 50%;
    border:        2px solid #08f;
}

span {
    position:  absolute;
    top:       -36px;
    left:      12px;
    width:     max-content;
    transform: translateX(-50%);
    z-index:   1;
}
<ol>
  <li><span>Step 1</span></li>
  <li><span>Step 2</span></li>
  <li><span>Step 3</span></li>
  <li><span>Step 4</span></li>
</ol>

在我的代码中，节点是伪元素，我使用了 flex-grow 属性，以便正确分布规则（即 li 标签）。font-size: 0隐藏文本并将其从元素的内容大小中删除。

- - 编辑：

我删除了 font-size: 0 并为标签和 css 添加了 span 标签来定位它。

推荐阅读