我已经构建了以下内容,但问题是颜色溢出到栏的右侧。
.onboarding-steps {
display: flex;
}
.onboarding-steps-container {
background-color: #393D66;
border-top: 1px solid #AEAEAE;
border-bottom: 1px solid #AEAEAE;
background-position: -50% 0;
}
.onboarding-step.active {
color: white;
}
.onboarding-step.active ~ .onboarding-step {
background-color: #fff;
}
.container-fluid {
max-width: 94px;
margin-right: auto;
margin-left: auto;
}
.list-reset {
list-style: none;
padding: 0;
margin: 0;
}
.onboarding-step {
-ms-flex-positive: 1;
flex-grow: 1;
padding: 1.8rem 1rem 1.8rem 1.5rem;
}
<nav class="onboarding-steps-container">
<div class="container-fluid">
<ul class="list-reset clearfix onboarding-steps">
<li class="onboarding-step">
1
</li>
<li class="onboarding-step active">
2
</li>
<li class="onboarding-step">
3
</li>
<li class="onboarding-step">
4
</li>
</ul>
</div>
</nav>
我还尝试了使用伪选择器的变体:
li.onboarding-step.active:before {
background-color: #f9f9f9;
content: '';
left: 0;
right: 0;
top: 0;
bottom: 0;
height: 100%;
position: absolute;
}
.onboarding-steps-container {
position: relative;
}
在这种情况下,整个条形都会显示颜色。
最佳答案
这是一个示例。
.breadcrumb {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
height: 36px;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
padding-right: 35px;
}
.breadcrumb li {
text-decoration: none;
padding: 10px;
position: relative;
cursor: pointer;
flex: auto;
border: 1px solid red;
}
.breadcrumb li span {
font-size: 11px;
display: inline-block;
width: 16px;
line-height: 16px;
border-radius: 50%;
background-color: white;
vertical-align: middle;
text-align: center;
margin-left: calc(100% - 8px);
}
.breadcrumb li:after {
content: "";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 30px solid #393D66;
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
.breadcrumb li:before {
content: "";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 30px solid white;
position: absolute;
top: 50%;
margin-top: -50px;
margin-left: 2px;
left: 100%;
z-index: 1;
}
li {
background-color: #393D66;
}
li:first-child {} li.active ~ li {
background-color: #f5f5f5;
}
li.active ~ li:after {
border-left-color: #f5f5f5;
}
li.active ~ li:before {
border-left-color: #d5d5d5;
}
li.active ~ li span {
background-color: #c5c5c5;
color: white;
}
<div class="stepper">
<ul class="breadcrumb">
<li><span>1</span>
</li>
<li><span>2</span>
</li>
<li class="active"><span>3</span>
</li>
<li><span>4</span>
</li>
<li><span>5</span>
</li>
</ul>
</div>
关于html - 使用伪类创建 CSS 进度条/步进器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38993572/