在foreach（）函数内部，DIV彼此重叠

Question

我在其中编写了一个foreach（）函数，其中有一个显示颜色的DIV容器。它的工作正常，但它们相互重叠。如何将它与一些间隙（例如10像素）并排显示。

这是代码

<?php foreach($mbs_colors as $color){ ?>
   <div class="membership-indicator" style="background: <?php echo $color; ?>; margin-top: 4px;"></div>
<?php } ?>

我也尝试了以下代码，但它只将第一个元素和第二个，第三个，第四个等分开，使它只有两个元素的视觉外观。

<?php $j = 0; foreach($mbs_colors as $color){ ?>
   <div class="membership-indicator" style="background: <?php echo $color; ?>; margin-top: 4px; <?php if($j++ != 0){ echo "margin-left: 15px"; } ?>"></div>
<?php } ?>

这里有一个例子，我想要做什么。

CSS

.membership-indicator {
  width: 12px;
  height: 12px;
  position: absolute;
}

Answer 1

您需要将display属性设置为inline-block

＆＃13;

＆＃13;

.membership-indicator{
  width: 12px;
  height: 12px;
  position: relative;
  display: inline-block;
}

＆＃13;

<div class="membership-indicator" style="background: red; margin-top: 4px;"></div>
<div class="membership-indicator" style="background: red; margin-top: 4px;"></div>
<div class="membership-indicator" style="background: red; margin-top: 4px;"></div>
<div class="membership-indicator" style="background: red; margin-top: 4px;"></div>
<div class="membership-indicator" style="background: red; margin-top: 4px;"></div>
<div class="membership-indicator" style="background: red; margin-top: 4px;"></div>
<div class="membership-indicator" style="background: red; margin-top: 4px;"></div>
<div class="membership-indicator" style="background: red; margin-top: 4px;"></div>
<div class="membership-indicator" style="background: red; margin-top: 4px;"></div>
<div class="membership-indicator" style="background: red; margin-top: 4px;"></div>
<div class="membership-indicator" style="background: red; margin-top: 4px;"></div>
<div class="membership-indicator" style="background: red; margin-top: 4px;"></div>
<div class="membership-indicator" style="background: red; margin-top: 4px;"></div>
<div class="membership-indicator" style="background: red; margin-top: 4px;"></div>
<div class="membership-indicator" style="background: red; margin-top: 4px;"></div>
<div class="membership-indicator" style="background: red; margin-top: 4px;"></div>
<div class="membership-indicator" style="background: red; margin-top: 4px;"></div>
<div class="membership-indicator" style="background: red; margin-top: 4px;"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用css。

.membership-indicator {
  height: 12px;
  width: 12px;
  float: left;
  margin-right: -10px;
}