Question

我目前正在尝试在网页上呈现各种圈子。我目前正在使用以下网页中的修改后的CSS绘制圆圈：

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

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

我需要将圆圈彼此分开（可能是3px？）
我需要圆圈在同一水平线上
我似乎无法同时做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中的圈子div实现了circle和cell类。

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

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

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

Answer 1

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

适用于：除了table-caption，table和inline-table之外的表格显示类型的元素以外的所有元素

获得所需结果的一种方法是删除display: table-cell;并将float: left;和margin-right: 3px;添加到圈子中。

＆＃13;

.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*/
}

＆＃13;

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

＆＃13;

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

将其添加到班级＆＃39;。＆＃39;。

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

plunker

Answer 5

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

Answer 6

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

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

代码：

 select * from oldtexts old WHERE old.content REGEXP "^\\[TAG=[A-Za-z][,][A-Za-z]\]" LIMIT 10

此致

Tomas Tudja

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

6 个答案: