javascript - 根据元素和容器大小计算边距？

Question

在我下面的代码片段中，我有三个圆圈作为导航，圆圈大小为 15 像素 x 15 像素，容器是一个百分比，可以随时更改。

我使用 margin-right 作为百分比，只是猜测合适的值。我想知道的是，是否有一个公式可以计算适当的 margin-right 以便圆圈从一端到另一端均匀间隔，动态以便我可以添加删除圆圈？

有没有更好的解决方案，我试过 flex-box 但我无法让它工作。

ul {
  margin: 0;
  padding: 0
}
.guide-bar {
  position: relative;
}
.guide-bar:before {
  content: "";
  position: absolute;
  height: 1px;
  top: 7px;
  width: 100%;
  background-color: #303B44;
  color: #303B44;
  z-index: -1;
}
.guide-bar ul li {
  background-color: #fff;
  cursor: pointer;
  position: relative;
  list-style: none;
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 2px solid;
  border-radius: 100em;
  margin-right: 39.56666%;
}
.guide-bar ul li:last-child {
  margin-right: 0;
}
.guide-bar ul li.active:before {
  content: "";
  position: absolute;
  height: 5px;
  width: 5px;
  background-color: #2AA1FA;
  border-radius: 100em;
  margin: auto;
  left: 0px;
  right: 0;
  top: 0;
  bottom: 0;
}
.guide-bar ul li.active:after {
  content: "";
  position: absolute;
  height: 25px;
  width: 25px;
  border: 1px solid #2AA1FA;
  border-radius: 100em;
  margin: auto;
  left: -7px;
  right: 0;
  top: 0;
  z-index: -1;
  bottom: 0;
}
.guide-bar ul li.watched {
  color: #4bd495;
  background: #4bd495;
}

<div style="width: 50%">
  <div class="guide-bar" style="top: -5px;">
    <ul>
      <li id="intro" data-step="" class="active"></li>
      <li id="howTo"></li>
      <li id="conclusion"></li>
    </ul>
  </div>
</div>

Answer 1

您可以使用以下技术证明对齐行内 block 元素:"text-align: justify;" inline-block elements properly?

此外，您可以在顶部和左侧使用百分比，然后在此规则上使用负 margin-top 和 margin-left .guide-bar ul li.active:after 使其与中心

此外，要绘制带有 border-radius 的圆，请将其设置为 50%...

看这里:http://jsfiddle.net/2vcuxt4k/2/

.guide-bar ul {
  text-align: justify;
}
.guide-bar ul:before {
  content: '';
  display: block;
  width: 100%;
}
.guide-bar ul:after {
  content: '';
  display: inline-block;
  width: 100%;
}
.guide-bar ul li.active:before {
  content: "";
  position: absolute;
  height: 5px;
  width: 5px;
  background-color: #2AA1FA;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  margin-top: -2.5px;
  /* half the size of the circle, including the border */
  margin-left: -2.5px;
}
.guide-bar ul li.active:after {
  content: "";
  position: absolute;
  height: 25px;
  width: 25px;
  border: 1px solid #2AA1FA;
  border-radius: 50%;
  z-index: -1;
  top: 50%;
  left: 50%;
  margin-top: -13.5px;
  /* half the size of the circle, including the border */
  margin-left: -13.5px;
}