在中间创建一个带圆的线

Question

所以，我试图实现这个结果：

这是我尝试时得到的：https://jsfiddle.net/wvdkmjge/

＆＃13;

＆＃13;

.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%;
}

＆＃13;

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

  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

而且，我希望我看不到圆圈上的边界线。有什么建议吗？

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

回答有点迟，但这看起来像是需要一些makup的典型<hr/>。

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

Answer 4

试试这个：

.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 5

Fiddle

这使用了很多不同的代码。

###Windows/MinGW###
- Make sure CMake is both installed and added to the system PATH.
- Open a Terminal and run:
```Shell 
# install dependencies
# Install GLEW in %PROGRAMFILES%/GLEW or SET %GLEW_ROOT_DIR% to where GLEW is on your machine (Example: D:\PATH_TO_GLEW)
# Install SDL2 in %PROGRAMFILES%/SDL2 or SET %SDL2_ROOT_DIR% to where SDL2 is on your machine (Example: D:\PATH_TO_SDL2)
# Install ASSIMP in %PROGRAMFILES%/ASSIMP or SET %ASSIMP_ROOT_DIR% to where ASSIMP is on your machine (Example: D:\PATH_TO_ASSIMP)
cd build
# REPLACE "Visual Studio 12" with your preferred build toolchain (Maybe you want "Codeblocks - MinGW Makefiles")
# BTW VS 10 is VS 2010, VS 11 is VS 2012 and VS 12 is VS 2013, BLAME MicroSoft for the naming! LOL! 
cmake -G "Visual Studio 12" ../
# open the generated SLN file (or cbp file if using CodeBlocks) and build!
```
- Copy the DLLs in /lib/_bin/ to /build/Debug/ and /build/Release/
- In Visual Studio, set the Startup project to 3DEngineCpp
- Move the res folder into the build folder
- Run

希望这能帮到你！