Mitte ein Kreis auf einer Linie

Question

Ich mag würde einen Kreis auf einer Linie zentriert, wie folgt aus:

ich den folgenden Code haben:

.circle { 
width: 75px; 
height: 75px; 
border-radius: 50%; 
position: absolute; 
left: 76%; 
top: 41px; 
background-color: #000; 
} 

.box { 
width:500px; 
height:150px; 
position: relative; 
border: 1px solid #eee; 

.left { 
width:200px; 
height:100%; 
position:relative; 
} 

<div class="Box"> 
    <div class="Left"> 
     <div class="circle"> 

     </div> 
    </div> 
    <div class="Right"></div> 
</div> 

Wenn jedoch i die Größe der Fenster, so endet es wie folgt auf:

Wie kann ich sicherstellen, dass der Kreis an Ort und Stelle bleibt, auch wenn ich die Größe meines Fensters ändere?

Answer 1

Sie könnten einen anderen Ansatz und verwenden Sie die border-right Eigenschaft auf dem .left div hinter dem .circle die vertikale Linie zu vertreten:

.circle { 
 
    width: 75px; 
 
    height: 75px; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    right: -37.5px; /* modified/- half of the circle's width */ 
 
    top: 41px; 
 
    background-color: #000; 
 
} 
 

 
.box { 
 
    width: 500px; 
 
    max-width: 100%; /* added/responsive */ 
 
    height: 150px; 
 
    position: relative; 
 
    border: 1px solid #eee; 
 
} 
 

 
.left { 
 
    width: 200px; 
 
    max-width: 100%; /* added/responsive */ 
 
    height: 100%; 
 
    position: relative; 
 
    border-right: 1px solid #eee; /* added */ 
 
}

<div class="box"> 
 
    <div class="left"> 
 
    <div class="circle"> 
 

 
    </div> 
 
    </div> 
 
    <div class="right"></div> 
 
</div>

Answer 2

Versuchen position: static; oder position: fixed;

Don Es ist nicht möglich, die {} vonzu schließenKlassenselektor.

Answer 3

Eine andere einfach Art und Weise, dies zu tun ist, wie diese Pseudo-Element mit:

.box { 
 
    margin: 10px auto; 
 
    max-width: 400px; 
 
    border: 1px solid #000; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 

 
.box:before { 
 
    content: " "; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 50%; 
 
    width: 1px; 
 
    margin-left: -0.5px; 
 
    background: #000; 
 
} 
 

 
.cirle { 
 
    display: inline-block; 
 
    width: 100px; 
 
    height: 100px; 
 
    border-radius: 50%; 
 
    background: #000; 
 
    margin: 20px 0; 
 
}

<div class="box"> 
 
    <div class="cirle"></div> 
 
</div>

dieser Teil des Codes wird die Linie in der Mitte bleiben sicher:

.box:before { 
    left: 50%; 
    margin-left: -0.5px; 
}