html - 如何在css中为绝对位置的兄弟div元素的左边距设置动态数

从下面的CSS中的类定义可以看出，我试图为同一个类的每个绝对位置的类设置一个动态的margin left值，但是我无法让它工作。

.header-paymentback-panel{
position: relative;
float: left;
width: 225px;
height: 150px;
background: #f5f5f5;
border: 2px solid #eaeaea;
border-radius: 5px;
display: inline-block;
}

.half-circle {
position: absolute;
bottom: -2px;
float: left;
width: 45px;
height: 30px;
background-color: #fff;
border-top-left-radius: 60px;
border-top-right-radius: 60px;
border: 2px solid #eaeaea;
border-bottom: 0;
}

.half-circle:nth-child(n) {
 margin-left: /* (20px * item index) */
}

HTML格式：

<div class="header-paymentback-panel">

<div class="half-circle"></div>
<div class="half-circle"></div>
<div class="half-circle"></div>

</div>

谢谢你的帮助。

最佳答案

您可以将父元素添加到.half-circle元素中。
例如，.half-circle-container并给它position: absolute;
然后用.half-circle添加display: inline-block;元素
之后，您可以根据需要为margin-left设置.half-circle。请参见下面的代码：

.header-paymentback-panel {
  position: relative;
  float: left;
  width: 225px;
  height: 150px;
  background: #f5f5f5;
  border: 2px solid #eaeaea;
  border-radius: 5px;
  display: inline-block;
}

.half-circle-container {
  position: absolute;
  bottom: -2px;
  left: 0;
}

.half-circle {
  display: inline-block;
  vertical-align: middle;
  width: 45px;
  height: 30px;
  background-color: #fff;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border: 2px solid #eaeaea;
  border-bottom: 0;
  margin-left: 20px; //Change here
}

<div class="header-paymentback-panel">
  <div class="half-circle-container">
    <div class="half-circle"></div>
    <div class="half-circle"></div>
    <div class="half-circle"></div>
  </div>
</div>