我不知道如何创建这样的元素,以便点之间的距离始终适应屏幕尺寸。
这是我的代码的结果:
.line-list {
display: flex;
justify-content: space-between;
padding: 0;
}
.line-list__item {
position: relative;
display: inline-block;
width: 15px;
height: 15px;
border: 2px solid #00bfa5;
border-radius: 50%;
background-color: #fafafa;
}
.line-list__item:after {
content: '';
position: absolute;
top: 45%;
left: 100%;
display: block;
width: 100vw;
height: 2px;
background-color: #00bfa5;
z-index: -1;
}
.line-list__item:last-child:after { content: none; }
<ul class="line-list">
<li class="line-list__item"> </li>
<li class="line-list__item"> </li>
</ul>
最佳答案
还没有尝试过您的代码,但是这样做了:-
使用相对单位vw作为点之间的余量。
#bt1{
width:20px;
height:20px;
margin-left:10vw;
}
#bt2{
width:20px;
height:20px;
margin-left:60vw;
}
<button type="button" id="bt1">
</button>
<button type="button" id="bt2">
</button>