以li ::为中心，然后与li在一起

Question

我正在尝试实现一个面包屑式导航栏，如下图所示（取自Namecheap的结帐页面）。为简单起见，假装购物车图标为蓝色圆圈。

通过检查站点的代码，我了解到他们已经使用::before选择器将水平线和圆形槽口与标签一起放置。我可以将线固定到位，但不能固定圆。

这是我到目前为止所拥有的：

body {
  padding: 1rem;
  color: #6d6e70;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}

div.step-nav-container {
  position: relative;
}

ol.step-nav {
  display: inline-block;
  width: 100%;
  margin: 2.5rem 0 0 0;
  padding: 0;
  list-style: none;
}

ol.step-nav::before {
  content: '';
  border-top: 3px solid #6d6e70;
  margin-top: -1px;
  position: absolute;
  top: 1rem;
  right: 0;
  left: 0;
  z-index: -1;
}

ol.step-nav.step-nav-4::before {
  margin: 0 12.5%;
}

ol.step-nav.step-nav-5::before {
  margin: 0 10%;
}

ol.step-nav li {
  text-align: center;
  display: relative;
  float: left;
}

ol.step-nav li::before {
  content: '';
  width: 0.625rem;
  height: 0.625rem;
  border: 3px solid #6d6e70;
  border-radius: 100%;
  position: absolute;
  top: 0.625rem;
  left: 50%;
  background-color: white;
}

ol.step-nav li.active {
  color: #8dc2c2;
}

ol.step-nav li.active::before {
  border: 3px solid #8dc2c2;
}

ol.step-nav.step-nav-4 li {
  width: 25%;
}

ol.step-nav.step-nav-5 li {
  width: 20%;
}

<div class="step-nav-container">
  <ol class="step-nav step-nav-5">
    <li>Cart</li>
    <li>Review</li>
    <li class="active">Billing</li>
    <li>Place Order</li>
    <li>Done</li>
  </ol>
 </div>
 <div class="step-nav-container">
  <ol class="step-nav step-nav-4">
    <li>Cart</li>
    <li class="active">Billing</li>
    <li>Place Order</li>
    <li>Done</li>
  </ol>
</div>

我试图将圆圈定位在每个<li>标签的中心，但是它们定位在<ol>的中心。我确定我缺少一些简单的东西，但似乎无法弄清楚。任何帮助表示赞赏。

Answer 1

这是根据您的代码和注释编写的代码段。

body {
    padding: 1rem;
    color: #6d6e70;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}

div.step-nav-container {
    position: relative;
}

ol.step-nav {
    display: inline-block;
    width: 100%;
    margin: 2.5rem 0 0 0;
    padding: 0;
    list-style: none;
}

ol.step-nav::before {
    content: '';
    border-top: 3px solid #6d6e70;
    margin-top: -1px;
    position: absolute;
    top: 1rem;
    right: 0;
    left: 0;
    z-index: -1;
}

ol.step-nav.step-nav-4::before {
    margin: 0 12.5%;
}

ol.step-nav.step-nav-5::before {
    margin: 0 10%;
}

ol.step-nav li {
    text-align: center;
    
    float: left;
    position: relative;
}

ol.step-nav li::before {
    content: '';
    width: 0.625rem;
    height: 0.625rem;
    border: 3px solid #6d6e70;
    border-radius: 100%;
    position: absolute;
    top: -1.875rem;
    left: 50%;
    background-color: white;
}

ol.step-nav li.active {
    color: #8dc2c2;
}

ol.step-nav li.active::before {
    border: 3px solid #8dc2c2;
}

ol.step-nav.step-nav-4 li {
    width: 25%;
}

ol.step-nav.step-nav-5 li {
    width: 20%;
}

<div class="step-nav-container">
    <ol class="step-nav step-nav-5">
        <li>Cart</li>
        <li>Review</li>
        <li class="active">Billing</li>
        <li>Place Order</li>
        <li>Done</li>
    </ol>
</div>
<div class="step-nav-container">
    <ol class="step-nav step-nav-4">
        <li>Cart</li>
        <li class="active">Billing</li>
        <li>Place Order</li>
        <li>Done</li>
    </ol>
</div>