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

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

这是我的代码的结果:



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

最佳答案

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

07-24 09:50
查看更多