在foreach（）函数中，DIV相互重叠

Question

I have a foreach() function written inside which there is a DIV container showing colors. Its working fine but they are overlapping each other. How can I make this appear side by side with some gap say 10 pixels.

Here is the code

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

I also tried the following code but it only separates all from the 1st element and 2nd, 3rd, 4th etc overlaps each other making it visual appearance of only two elements.

<?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 } ?>

An example is here of what I exactly want to do.

CSS

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

Answer 1

You need to set display property to inline-block

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

 <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> 

Answer 2

You can do it with css.

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