css - 将 css 中生成的圆圈并排放置，而不使用 markdown 文件中的表格

Question

我正在使用 css 画一些圆圈。我是这样做的:

circle {
    background: #f00;
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

这是我在 Markdown 文件中使用它的方法:

<circle>Text</circle>

我想并排放置一些这样的圆圈，它们之间有一点空间，而不是彼此重叠。我知道我可以使用表格并将它们放在表格上，但问题是，如果网站响应式，那么圆圈将保留在表格行中，例如每行 3 个圆圈，在移动设备上看起来会很糟糕设备。我可以将实际图像(例如 .png 文件)并排放置，而无需表格，并且在移动设备上，图像将环绕并且一切看起来都很好。当我使用 css 绘制圆圈时，有没有办法做同样的事情？

Answer 1

<circle>实际上是一个 SVG 元素。

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle

所以你应该使用div然后保留divs内联只需使用 display: inline-block;

div {
    background: #f00;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
    text-align: center;
    line-height: 50px;
}

<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>