創建中間

Question

因此，與圓線，我想實現這一結果：

這是我當我嘗試：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>

此外，我希望我不會在圓上看到邊框線。有什麼建議麼？

Answer 1

一個小的修正你的代碼position的元素，你會得到你想要達到的效果。

.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

如果要根據其父項定位元素，請使用position:relative作爲父項，然後向子項添加相對位置或絕對位置。居中在中間的東西，用margin:0 auto如果它具有絕對的定位也增加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

試試這個：

.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

這使用了很多不同的編碼日以上。

class:before and class:after 

希望這可以幫助你！

Answer 5

有點晚回答，但這看起來像一個典型的<hr/>需要一些makup。

/* 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/>