Wie erstellt man ein solches Element (adaptiv)?

Question

Ich kann nicht herausfinden, wie man ein solches Element erstellt, um den Abstand zwischen Punkten immer an die Bildschirmgröße anzupassen.

Hier ist Ergebnis meiner Code:

.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

nicht auf Ihrem Code versucht, aber machte diese: - Gebrauchte relative Einheit vw für Marge zwischen Punkten.

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

 

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

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

 
</button> 
 

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

 
</button>

Answer 2

Wird nur auf Browsern (nicht an der Geige oder 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

ich entschieden.

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

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