Placing circles generated in css side by side without use of table in markdown file

问题

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>

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?

回答1:

Try This :

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>

回答2:

<circle> is actually an SVG element.

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

So you should be using a div and then to keep the divs inline just use 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>

回答3:

You should use div instead of circle (I think circle is only for an inline svg) and set display to inline-block.

div.circle {
    display:inline-block;
    background: #f00;
    width: 200px;
    height: 200px;
    border-radius: 50%;
}


<div class="circle"></div>

来源：https://stackoverflow.com/questions/44299221/placing-circles-generated-in-css-side-by-side-without-use-of-table-in-markdown-f