Html 当屏幕缩放时，如何将CSS中的内联圆圈置于彼此下方？

有很多关于如何使用图像的资源，但是使用CSS制作的圆圈有点棘手。这是我的代码：

HTML

我在桌面尺寸上做了一些设计。当我将其缩放到手机屏幕大小时，一个圆圈会相互交错。我要把它放在彼此下面。当没有足够的空间容纳4个圆圈时，两个圆圈将下降。当两行中没有足够的空间容纳两个圆时，我希望它转到单独的行。每次它应该在屏幕中间居中。

我试着用table来做，但并没有成功，因为circle被“转化”为elipse

---

感谢您的回答

删除

#圆圈li的宽度

，它应该堆叠起来，而不是互相碰撞

.circle{
显示：表格；
宽度：10em；
高度：10公分；
边界半径：50%；
溢出：隐藏；
背景：透明；
长方体阴影：0 3px灰色；
}
.圆形分区{
显示：表格单元格；
宽度：100%；
身高：100%；
线高：1米；
文本对齐：居中；
垂直对齐：中间对齐；
字号：7em；
字体系列：“Raleway”，无衬线；
颜色：黑色；
}
#纵队{
宽度：13em；
}
#圈{
保证金：0；
填充：0；
列表样式：无；
}
#圈里{
浮动：左；
利润率：1.25%；
}
#包装纸{
最大宽度：60em；
保证金：0自动；
填充：0.5%；
}

K
这里有一些文字



T
这里有一些文字



R
这里有一些文字



F
这里有一些文字

嗨，皮特，非常感谢，它很管用。但我现在看不到圆圈内的文字，我应该怎么做才能使它可见？

<div id="wrapper">
        <ul id="circles">
            <li>
                <div class="circle"><div>K</div></div>
                <div id="column"><p>Some text here</p> </div>
            </li>
            <li>
                <div class="circle"><div>T</div></div>
                <div id="column"><p>Some text here</p></div>
            </li>
            <li>
                <div class="circle"><div>R</div></div>
                <div id="column"><p>Some text here</p></div>
            </li>   
            <li>
                <div class="circle"><div>F</div></div>
                <div id="column"><p>Some text here</p></div>
            </li>
        </ul>       
</div>  

.circle {
width: 10em;
height: 0;
padding-bottom: 10em;
border-radius: 50em;
border: 0.1em solid white;
overflow: hidden;
background: transparent;
box-shadow: 0 0 3px gray;
}

.cirlce div {
float:left;
width:100%;
padding-top:50%;
line-height:1em;
margin-top:-0.5em;
text-align:center;
font-size: 7em; 
font-family: 'Raleway', sans-serif;
color:white;
}

#column {
    width: 13em;   
}

#circles {
margin: 0;
padding: 0;
list-style: none;
}

#circles li {
float: left;
width:22.5% ;
margin:1.25% ;
}

#wrapper {
max-width: 60em;
margin: 0 auto;
padding: 0 5%;
}