html – 在中间创建一个带有圆的行
发布时间:2020-12-14 19:33:20 所属栏目:资源 来源:网络整理
导读:所以,我试图达到这个结果: 这是我在尝试时所得到的:https://jsfiddle.net/wvdkmjge/ .container { width: 100px; height: 1px; background-color: black;}.circle { display: inline-block; vertical-align: middle; width: 10px; height: 10px; backgroun
所以,我试图达到这个结果:
这是我在尝试时所得到的: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> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |