我正在尝试建立一个水平css向导导航，每个步骤都有一个圆形的css圆圈和文字。我被困在1点需要从右侧乘坐边界。几乎尝试了所有步骤。附上代码。
附上问题的截图。
ul {
text-align: justify;
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
}
ul:before {
content: '';
width: 96%;
border: 2px solid #21a2d1;
position: absolute;
top: 1em;
margin-top: -6px;
z-index: -1;
margin-left: 16px;
}
.active:after {
content: '';
width: 100%;
border: 2px solid #b7b7b7;
position: absolute;
top: 1em;
margin-top: -6px;
z-index: -1;
}
ul:after {
content: '';
display: inline-block;
width: 100%;
}
li {
width: 1.5em;
height: 1.5em;
text-align: center;
line-height: 1.7em;
border-radius: 50%;
background: #21a2d1;
margin: 0 1em;
display: inline-block;
}
.marker-number {
font-size: 14px;
}
li.active {
background: #04497b;
}
.active ~ li {
background: #b7b7b7;
}
span.marker-text {
color: #7d7d7d;
font-size: 12px;
line-height: 16px;
width: 70px;
display: block;
margin-left: -21px;
font-family: Arial;
}<ul>
<li><span class="marker-number"> </span> <span class="marker-text">Select Car</span></li>
<li><span class="marker-number"> </span> <span class="marker-text">Questions</span></li>
<li class="active"><span class="marker-number"> </span> <span class="marker-text">Problems</span></li>
<li><span class="marker-number"> </span> <span class="marker-text">Inspection</span></li>
<li><span class="marker-number"> </span> <span class="marker-text">Solution</span></li>
</ul>
答案 0 :(得分：5)
以下是一个示例，使用flexbox，带有最小标记，标记为::before伪，行为::after伪（从2：nd位置开始）
ul.wizard, ul.wizard li {
margin: 0;
padding: 0;
display: flex;
width: 100%;
}
ul.wizard {
counter-reset: num;
}
ul.wizard li {
flex-direction: column;
align-items: center;
position: relative;
}
ul.wizard li::before {
counter-increment: num;
content: counter(num);
width: 1.5em;
height: 1.5em;
text-align: center;
line-height: 1.5em;
border-radius: 50%;
background: #21a2d1;
}
ul.wizard li ~ li::after {
content: '';
position: absolute;
width: 100%;
right: 50%;
height: 4px;
background-color: #21a2d1;
top: calc(.75em - 2px);
z-index: -1;
}
ul.wizard li.active::before {
background: #04497b;
color: white;
}
ul.wizard .active ~ li::before,
ul.wizard .active ~ li::after {
background: #b7b7b7;
}
ul.wizard span {
color: #7d7d7d;
font-size: 12px;
font-family: Arial;
}
/* updated sample */
ul.wizard li.completed::before { /* number and circle */
background: red;
color: white;
}
ul.wizard li.completed span { /* text */
color: red;
}
ul.wizard li.completed + li::after { /* line after circle */
background: red;
}
ul.wizard li.completed::after { /* line before circle */
background: red;
}<ul class="wizard">
<li>
<span>Select Car</span>
</li>
<li class="completed">
<span>Questions</span>
</li>
<li class="active">
<span>Problems</span>
</li>
<li>
<span>Inspection</span>
</li>
<li>
<span>Solution</span>
</li>
</ul>
如果您需要定位旧浏览器
，也可以在没有flexbox的情况下完成此操作
ul.wizard, ul.wizard li {
margin: 0;
padding: 0;
}
ul.wizard {
counter-reset: num;
}
ul.wizard li {
list-style-type: none;
float: left;
width: 20%;
position: relative;
text-align: center;
}
ul.wizard li::before {
display: block;
counter-increment: num;
content: counter(num);
width: 1.5em;
height: 1.5em;
text-align: center;
line-height: 1.5em;
border-radius: 50%;
background: #21a2d1;
margin: 0 auto;
}
ul.wizard li ~ li::after {
content: '';
position: absolute;
width: 100%;
right: 50%;
height: 4px;
background-color: #21a2d1;
top: calc(.75em - 2px);
z-index: -1;
}
ul.wizard li.active::before {
background: #04497b;
color: white;
}
ul.wizard .active ~ li::before,
ul.wizard .active ~ li::after {
background: #b7b7b7;
}
ul.wizard span {
display: inline-block;
color: #7d7d7d;
font-size: 12px;
font-family: Arial;
}<ul class="wizard">
<li>
<span>Select Car</span>
</li>
<li>
<span>Questions</span>
</li>
<li class="active">
<span>Problems</span>
</li>
<li>
<span>Inspection</span>
</li>
<li>
<span>Solution</span>
</li>
</ul>
答案 1 :(得分：1)
将伪元素:befor的宽度减少到90%，将:after的宽度减少到45%，但必须根据激活的li将其写入不同的宽度百分比标签和按屏幕大小。我认为如果你稍微修改你的标记，这将有助于你更多，并减少并发症。
=============================================== =============
ul {
text-align: justify;
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
display: inline-flex;
justify-content: space-around;
width: 100%;
}
li {
position: relative;
width: 20%;
text-align: center;
display: inline;
padding-bottom: 20px;
}
.marker-number {
width: 1.5em;
height: 1.5em;
text-align: center;
line-height: 1.7em;
border-radius: 50%;
background: #21a2d1;
display: inline-block;
}
.marker-line {
position: absolute;
width: 100%;
height: 4px;
background-color: #21a2d1;
top: 10px;
}
li.active span.marker-number,
li.active span.marker-line {
background: #04497b;
}
.active ~ li span.marker-number,
.active ~ li span.marker-line {
background: #b7b7b7;
}
span.marker-text {
color: #7d7d7d;
font-size: 12px;
line-height: -15px;
font-family: Arial;
position: absolute;
left: 0;
right: 0;
bottom: 0;
}<ul>
<li>
<span class="marker-number"> </span>
<span class="marker-line"></span>
<span class="marker-text">Select Car</span>
</li>
<li>
<span class="marker-number"> </span>
<span class="marker-line"></span>
<span class="marker-text">Questions</span>
</li>
<li class="active">
<span class="marker-number"> </span>
<span class="marker-line"></span>
<span class="marker-text">Problems</span>
</li>
<li>
<span class="marker-number"> </span>
<span class="marker-line"></span>
<span class="marker-text">Inspection</span>
</li>
<li>
<span class="marker-number"> </span>
<span class="marker-text">Solution</span>
</li>
</ul>