如何在这些CSS圆之间放置空格？

Question

我目前正在尝试在页面上绘制各种圆圈。 我目前正在使用来自以下网页的修改后的CSS绘制圆圈：

https://css-tricks.com/examples/ShapesOfCSS/

上面链接中的圆圈CSS绘制了圆圈，但是我遇到了两个问题：

1. 我需要将圆圈彼此间隔开（也许3px ？）
2. 我需要圆圈在同一水平线上
3. 我似乎无法同时进行1和2

我正在使用以下HTML和CSS：

 .circle-blue { width: 10px; height: 10px; background: deepskyblue; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } .circle-gray { width: 10px; height: 10px; background: gray; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } .cell { display: table-cell; font-size: 6px; } 

 <div class="circle-blue cell"></div> <div class="circle-gray cell"></div> <div class="circle-blue cell"></div> 

HTML中的circle div实现了circle和cell类。

下面的Plunker链接将带您进入我的示例：

http://plnkr.co/edit/SPHmKyOjF6GbTtjEFPrd?p=preview

注意：圆圈很小，因此您必须查看Plunker预览模式的左上角才能找到它们。

Answer 1

问题是您将div设置为display: table-cell; 。 当元素的display属性设置为table-cell时， margin不适用于元素。 http://www.w3.org/TR/CSS2/box.html#margin-properties指出margin ：

适用于：除表显示类型以外的所有元素（表标题，表和内联表除外）

获得期望结果的一种方法是删除display: table-cell; 并添加float: left; 和margin-right: 3px; 改为圈子。

 .circle-blue { width: 10px; height: 10px; background: deepskyblue; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } .circle-gray { width: 10px; height: 10px; background: gray; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } .cell { /*display:table-cell; Remove this*/ font-size: 6px; float: left; /*Add this*/ margin-right: 3px; /*Add this*/ } 

 <div class="circle-blue cell"></div> <div class="circle-gray cell"></div> <div class="circle-blue cell"></div> 

Answer 2

用这个

  .cell{
  margin-left: 5px;
  display: inline-block;
  font-size: 6px;
  }

代替

.cell{
  display: table-cell;
  font-size: 6px;
}

Answer 3

使用表格时，请勿在其中放置内容（例如图像），例如在单元格中专门为内容添加一个新的div，然后在单元格上使用填充以提供如下所示的间距

这样，您就可以在进行响应式设计时保持单元的流动性，并且不会像浮动或嵌入式块那样向下推，因为您使用表格进行显示是我假设的。

---

 .circle-blue { width: 10px; height: 10px; background: deepskyblue; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } .circle-gray { width: 10px; height: 10px; background: gray; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } .cell { display: table-cell; font-size: 6px; padding: 10px; } 

 <div class="cell"> <div class="circle-blue"></div> </div> <div class="cell"> <div class="circle-gray"></div> </div> <div class="cell"> <div class="circle-blue"></div> </div> 

Answer 4

将此添加到“单元格”类中。

display: inline-block;
margin: 0 3px;
vertical-align: top;

矮人

Answer 5

我认为，如果将display: table-cell更改为inline-block ，将会得到预期的结果。 当然，您也需要保证金。 希望对您有所帮助！

Answer 6

这将是一个可行的解决方案吗？

https://hdcs.cz/?q=node/26

编码：

<style>
.circle-blue {
  width: 10px;
  height: 10px;
  background: deepskyblue;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.circle-gray {
  width: 10px;
  height: 10px;
  background: gray;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.cell {
  display: table-cell;
  font-size: 6px;
}
</style>
<table>
<tr>
<td style="padding: 5px"><div class="circle-blue cell"></div></td>
<td style="padding: 5px"><div class="circle-gray cell"></div></td>
<td style="padding: 5px"><div class="circle-blue cell"></div></td>
</tr>
</table>

问候，

托马斯·图贾（Tomas Tudja）