所以,我试图达到这个结果：
这是我在尝试时所得到的：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>
此外,我想我不会看到圆圈上的边界线.有什么建议么？
解决方法
对您的代码进行一个小的修改以定位元素,并获得您想要实现的效果.
.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>
