以li为中心::与li满意之前 [英] Centering li::before content with li

问题描述

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

I'm trying to achieve a breadcrumb navigation bar like the one pictured below (taken from Namecheap's checkout page). For simplicity's sake, pretend the shopping cart icon is a blue circle.

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

I've learned by inspecting the site's code that they've made use of the ::before selector to place the horizontal line and circle notches along with the labels. I can get the line in place, but not the circles.

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

Here's what I have so far:

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>的中心.我敢肯定我缺少一些简单的东西，但是我似乎无法弄清楚.感谢您的帮助.

I was trying to position the circles centered with each <li> tag, but they're centered with the <ol>. I'm sure there's something simple I'm missing, but I can't seem to figure it out. Any help is appreciated.

推荐答案

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

Here is working snippet based on your code and comments.

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>

这篇关于以li为中心::与li满意之前的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！