如何创建这样的元素（自适应）？

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

Haven没有尝试过您的代码，但做到了这一点： - 使用相对单位vw表示点之间的边距。

＆＃13;

＆＃13;

#bt1{
	width:20px;
	height:20px;
	margin-left:10vw;
}


#bt2{
	width:20px;
	height:20px;
	margin-left:60vw;
}

＆＃13;

<button type="button" id="bt1">

</button>

<button type="button" id="bt2">

</button>

＆＃13;

＆＃13;

＆＃13;

Answer 2

仅适用于浏览器（不适用于小提琴或SO）

CSS

*{margin:0;padding:0;}
.element{
  position:relative;
  background-color:green;
  height:2px;
  width:calc(100vw - 40px -2px);
  margin:10px 20px;
}
.element::after,.element::before{
  content:'a';
  color:transparent;
  position:absolute;
  border: 2px solid green;
  width:20px;
  height:20px;
  border-radius:100%;
  top:-10px;
}
.element::after{
  right:-22;
}
.element::before{
  left:-22;
} 

HTML

<div class="element"></div>

Answer 3

我决定了。

＆＃13;

＆＃13;

    .line-list {
      display: flex;
      justify-content: space-between;
      
      padding: 0;
      overflow: hidden;
    }

    .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; }

＆＃13;

<ul class="line-list">
   <li class="line-list__item">&nbsp;</li>     
   <li class="line-list__item">&nbsp;</li>     
 </ul>  

＆＃13;

＆＃13;

＆＃13;