Tworzenie linię kółko w środku

Question

Tak, ja staram się osiągnąć ten wynik:

To co mam, kiedy próbowałem: https://jsfiddle.net/wvdkmjge/

.container { 
 
    width: 100px; 
 
    height: 1px; 
 
    background-color: black; 
 
} 
 
.circle { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    width: 10px; 
 
    height: 10px; 
 
    background-color: transparent; 
 
    border: solid 1px black; 
 
    border-radius: 50%; 
 
}

<div class="container"> 
 
    <div class="circle"> 
 

 
    </div> 
 
</div>

Co więcej, chcę, aby nie zobaczyłem linii granicznej na kole. Jakieś sugestie?

Answer 1

Mała poprawka do kodu do position elementów i masz efekt, który chcesz osiągnąć.

.container { 
 
    width: 100px; 
 
    height: 1px; 
 
    background-color: black; 
 
    position: relative; 
 
} 
 
.circle { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    width: 10px; 
 
    height: 10px; 
 
    background-color: white; 
 
    border: solid 1px black; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    top: -6px; 
 
    left: calc(50% - 5px); 
 
} 
 
.blue { 
 
    margin-top: 20px; 
 
    background: #3EB2EF; 
 
} 
 
.blue .circle { 
 
    background: #3EB2EF; 
 
    border-color: #3EB2EF; 
 
}

<div class="container"> 
 
    <div class="circle"> 
 

 
    </div> 
 
</div> 
 

 
<div class="container blue"> 
 
    <div class="circle"> 
 

 
    </div> 
 
</div>

Answer 2

Jeśli chcesz umieścić element w zależności od jego rodzica, użyj position:relative dla elementu nadrzędnego, a następnie dodaj pozycję względną lub bezwzględną do elementu podrzędnego. centrum coś w środku, użyj margin:0 auto i jeśli ma absolutne pozycjonowanie również dodać left:0; right:0;

https://jsfiddle.net/azizn/e4ev3awj/1/

.container { 
 
    width: 100px; 
 
    height: 1px; 
 
    background-color: blue; 
 
    position:relative; 
 
} 
 
.circle { 
 
    display:inline-block; 
 
    width: 10px; 
 
    height: 10px; 
 
    position: absolute; 
 
    background:blue; 
 
    left:0; 
 
    right:0; 
 
    margin:0 auto; 
 
    border-radius: 100%; 
 
    top:-4px; 
 
}

<div class="container"> 
 
<div class="circle"> 
 

 
</div> 
 
</div>

Answer 3

Spróbuj tego:

.container { 
 
    width: 100px; 
 
    height: 1px; 
 
    background-color: black; 
 
    position: relative; 
 
} 
 
.circle { 
 
    position: absolute; 
 
    top: -5px; 
 
    left: 50%; 
 
    margin-left: -5px; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    width: 10px; 
 
    height: 10px; 
 
    background-color: transparent; 
 
    border: solid 1px black; 
 
    border-radius: 50%; 
 
}

<div class="container"> 
 
    <div class="circle"> 
 

 
    </div> 
 
</div>

Answer 4

Fiddle

ten wykorzystuje wiele różnych kodów th pl powyżej.

class:before and class:after 

Mam nadzieję, że to pomoże!

Answer 5

trochę za późno, aby odpowiedzieć, ale wygląda na to, że jest to typowy model <hr/>, który wymaga pewnych czynności.

/* restyle however your needs are hr and its pseudo elements , here only one is used */ 
 
hr { 
 
    color: turquoise; 
 
    border-width: 3px; 
 
    margin: 1em; 
 
    box-shadow: 0 0 5px gray; 
 
} 
 
hr:before { 
 
    content: ''; 
 
    border-radius: 100%; 
 
    position: absolute; 
 
    height: 20px; 
 
    width: 20px; 
 
    background: turquoise; 
 
    left: 50%; 
 
    margin: -10px; 
 
    box-shadow: inherit 
 
}

<hr/>