在李的内容之前居中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>