在内联列表元素之间添加水平线
在内联列表元素之间添加水平线
提问于 2018-08-29 01:20:44
我正在尝试使用以下HTML构建一个步骤进度条：
.fa-check-circle {
color: #5EB4FF;
}
.fa-circle {
color: #CFD7E6;
font-size: 14px;
}
.container {
width: 100%;
position: absolute;
z-index: 1;
margin-top: 20px;
}
.progressbar {
list-style-type: none;
display: flex;
align-items: center;
}
.divider {
flex-grow: 1;
border-bottom: 1px solid black;
margin: 5px
}
.progressbar li {
float: left;
width: 15%;
position: relative;
text-align: center;
}
.fr-inactive-radio {
background: #CFD7E6;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<ul class="progressbar m-0">
<li>
<span><i class="fa fa-check-circle mt-1 progress-dot"></i></span>
</li>
<li>
<span><i class="fa fa-check-circle mt-1 progress-dot"></i></span>
</li>
<li>
<span><input type="radio" checked="checked" class="progress-dot"></span>
</li>
<li>
<span><i class="fa fa-circle progress-dot"></i></span>
</li>
<li>
<span><i class="fa fa-circle progress-dot"></i></span>
</li>
</ul>
这导致了以下结果：
我想在项目符号之间添加水平线，如下所示：
我怎样才能最好地在我创建的点之间添加水平线(如果可能的话)？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-29 03:28:42
您可以像这样使用渐变：
.fa-check-circle {
color: #5EB4FF;
}
.fa-circle {
color: #CFD7E6;
font-size: 14px;
}
.progressbar {
list-style-type: none;
display: flex;
align-items: center;
padding:0;
background:
linear-gradient(to right,transparent 0,transparent calc(15% * 4),#fff calc(15% * 4)) calc(15% * 5) no-repeat,
repeating-linear-gradient(to right,transparent 0,transparent 20px,blue 20px, blue calc(15% - 5px),transparent calc(15% - 5px),transparent 15%) 0 50%/100% 5px no-repeat;
}
.divider {
flex-grow: 1;
border-bottom: 1px solid black;
margin: 5px
}
.progressbar li {
width: 15%;
}
.progressbar li span {
width:20px;
display:inline-block;
}
.fr-inactive-radio {
background: #CFD7E6;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<ul class="progressbar m-0">
<li>
<span><i class="fa fa-check-circle mt-1 progress-dot"></i></span>
</li>
<li>
<span><i class="fa fa-check-circle mt-1 progress-dot"></i></span>
</li>
<li>
<span><input type="radio" checked="checked" class="progress-dot"></span>
</li>
<li>
<span><i class="fa fa-circle progress-dot"></i></span>
</li>
<li>
<span><i class="fa fa-circle progress-dot"></i></span>
</li>
</ul>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52063319
复制相关文章
相似问题