Question

在我的下面的代码段中，我有三个圆圈作为导航，圆圈是15px乘15px，容器是百分比，可以随时更改。

我使用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

您可以使用此技术对齐内联块元素："text-align: justify;" inline-block elements properly?

此外，您可以在顶部和左侧使用百分比，然后在此规则.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;
}

根据元素和容器大小计算保证金？

1 个答案: