并排放置在CSS中生成的圆，而无需在Markdown文件中使用表格 [英] Placing circles generated in css side by side without use of table in markdown file

问题描述

我正在使用CSS绘制一些圆圈.这是我的方法:

I am drawing some circles using css. Here is how I do it:

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

这是我在降价文件中使用它的方式:

and here is how I use it in a markdown file:

<circle>Text</circle>

我想并排放置多个这样的圆，它们之间要留一点空间，而不是彼此重叠.我知道我可以使用表格并将其放在表格上，但是问题是，如果网站响应，则圆圈将停留在表格行中，例如每行中有3个圆圈，并且在移动设备上看起来非常糟糕设备.我可以将实际的图像(例如.png文件)并排放置，而没有桌子，而在移动设备上，图像将环绕起来，并且一切看起来都不错.当我使用CSS绘制圆圈时，有什么方法可以做同样的事情?

I want to place a number of these circles side-by-side with a little space between them, not on top of each other. I know I can use table and put them on a table, but the issue is that if the website is responsive then the circles will stay in a table row, for example with 3 circles in each row, and it will look very bad on mobile devices. I can put actual images, for example, .png files, side by side without a table and on mobile devices, the images will wrap around and everything looks good. Is there a way to do the same thing when I draw circles using css?

推荐答案

尝试一下:

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

<circle>Text</circle>
<circle>Text</circle>
<circle>Text</circle>

这篇关于并排放置在CSS中生成的圆，而无需在Markdown文件中使用表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！