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

Calculate margin based on elements and container size?

本文关键字：计算 元素      更新时间：2023-09-26

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

我使用的是百分比，只是猜测合适的值。我想知道的是，有没有一个公式可以计算出合适的边距，这样圆就可以从一端到另一端均匀地分布，动态地，这样我就可以添加删除圆了？

有更好的解决方案吗？我试过柔性盒子，但我无法让它发挥作用。

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>

您可以使用以下技术来对齐内联块元素："文本对齐：对齐"内联块元素是否正确？

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

此外，对于绘制具有边框半径的圆，请将其设置为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;
}

相关文章：