html - 如何创建这样的元素(自适应)？

Question

我不知道如何创建这样的元素，以便点之间的距离始终适应屏幕尺寸。

这是我的代码的结果:

.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">&nbsp;</li>     
    <li class="line-list__item">&nbsp;</li>     
</ul>   

Answer 1

还没有试过你的代码，但是做了这个:--使用相对单位 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>