以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屋!