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

我目前正在尝试在一个页面上渲染各种圆圈。我目前正在使用以下网页中修改的CSS绘制圆圈：

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

我需要圆圈彼此隔开（可能是

3px

？）

我需要这些圆在同一条水平线上

我似乎不能同时做1和2

我正在使用以下HTML和CSS：

。蓝色圆圈{
宽度：10px；
高度：10px；
背景：深蓝；
-moz边界半径：5px；
-webkit边界半径：5px；
边界半径：5px；
}
.灰色圆圈{
宽度：10px；
高度：10px；
背景：灰色；
-moz边界半径：5px；
-webkit边界半径：5px；
边界半径：5px；
}
.细胞{
显示：表格单元格；
字体大小：6px；
}

---

问题在于您正在将

div

设置为

display:table单元格<当元素的
display
属性设置为
table cell
时，code>margin

不适用于元素。声明

页边距
：

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

获得所需结果的一种方法是删除
display:table cell和添加<代码>浮动：左和
右边距：3倍改为指向圆圈


。蓝色圆圈{
宽度：10px；
高度：10px；
背景：深蓝；
-moz边界半径：5px；
-webkit边界半径：5px；
边界半径：5px；
}
.灰色圆圈{
宽度：10px；
高度：10px；
背景：灰色；
-moz边界半径：5px；
-webkit边界半径：5px；
边界半径：5px；
}
.细胞{
/*显示：表格单元格；删除此单元格*/
字体大小：6px；
浮动：左；/*添加此*/
右边距：3px；/*添加此*/
}
问题在于您正在将
div
设置为
display:table单元格<当元素的
display
属性设置为
table cell
时，code>margin
不适用于元素。声明
页边距
：

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

获得所需结果的一种方法是删除
display:table cell和添加<代码>浮动：左和
右边距：3倍改为指向圆圈


。蓝色圆圈{
宽度：10px；
高度：10px；
背景：深蓝；
-moz边界半径：5px；
-webkit边界半径：5px；
边界半径：5px；
}
.灰色圆圈{
宽度：10px；
高度：10px；
背景：灰色；
-moz边界半径：5px；
-webkit边界半径：5px；
边界半径：5px；
}
.细胞{
/*显示：表格单元格；删除此单元格*/
字体大小：6px；
浮动：左；/*添加此*/
右边距：3px；/*添加此*/
}

使用此

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

而不是

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

用这个

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

而不是

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

使用表格时，不要在单元格中放入内容，如图像等。在单元格中专门为内容添加一个新的div，然后在单元格上使用填充来指定间距，如下所示

这样，在进行响应性设计时，你们可以保持电池的流动性，它不会像浮动块或内联块那个样向下推，我假设你们是这样做的，因为你们使用表来显示



。蓝色圆圈{
宽度：10px；
高度：10px；
背景：深蓝；
-moz边界半径：5px；
-webkit边界半径：5px；
边界半径：5px；
}
.灰色圆圈{
宽度：10px；
高度：10px；
背景：灰色；
-moz边界半径：5px；
-webkit边界半径：5px；
边界半径：5px；
}
.细胞{
显示：表格单元格；
字体大小：6px；
填充：10px；
}
使用表格时，不要将内容放入表格中，如图像等。在单元格内专门为内容放置一个新的div，然后在单元格上使用填充来指定间距，如下所示

这样，在进行响应性设计时，你们可以保持电池的流动性，它不会像浮动块或内联块那个样向下推，我假设你们是这样做的，因为你们使用表来显示



。蓝色圆圈{
宽度：10px；
高度：10px；
背景：深蓝；
-moz边界半径：5px；
-webkit边界半径：5px；
边界半径：5px；
}
.灰色圆圈{
宽度：10px；
高度：10px；
背景：灰色；
-moz边界半径：5px；
-webkit边界半径：5px；
边界半径：5px；
}
.细胞{
显示：表格单元格；
字体大小：6px；
填充：10px；
}
将其添加到类“cell”中

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

将其添加到类“cell”中

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

我认为如果您将
显示：表格单元格
更改为
内联块
，您将得到预期的结果。当然你也需要保证金。
希望这有帮助
 我认为如果您将
显示：表格单元格
更改为
内联块
，您将得到预期的结果。当然你也需要保证金。
希望这有帮助
 这是一个可行的解决方案吗


守则：

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


.蓝色圆圈{
宽度：10px；
高度：10px；
背景：深蓝；
-moz边界半径：5px；
-webkit边界半径：5px；
边界半径：5px；
}
.灰色圆圈{
宽度：10px；
高度：10px；
背景：灰色；
-moz边界半径：5px；
-webkit边界半径：5px；
边界半径：5px；
}
.细胞{
显示：表格单元格；
字体大小：6px；
}

问候,

Tomas Tudja
这是一个可行的解决方案吗


守则：

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


.蓝色圆圈{
宽度：10px；
高度：10px；
背景：深蓝；
-moz边界半径：5px；
-webkit边界半径：5px；
边界半径：5px；
}
.灰色圆圈{
宽度：10px；
高度：10px；
背景：灰色；
-moz边界半径：5px；
-webkit边界半径：5px；
边界半径：5px；
}
.细胞{
显示：表格单元格；
字体si