在中间创建一个带圆的线

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

回答有点晚,但这看起来像一个<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/>