html - 屏幕缩放时，如何将 CSS 中的内联圆放在彼此的下面？

Question

有资源如何使用图像制作它，但是使用 CSS 制作圆圈有点棘手。这是我的代码:

HTML

<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>  

CSS

.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%;
}

我在桌面尺寸上设计了一些样式。当我将它缩放到移动屏幕大小时，一个圆圈会相互重叠。我想把它放在一起。当没有足够的空间容纳 4 个圆圈时，两个圆圈将下降。当两行中的两个圆圈没有足够的空间时，我希望它转到单独的行。每次它都应该在屏幕中间居中。

我试着用表格来做，但那不起作用，因为圆被“转换”为椭圆。

感谢解答

Answer 1

从 #circles li 中移除宽度，它应该堆叠而不是相互碰撞

.circle {
    display:table;
    width: 10em;
    height:10em;
    border-radius: 50%;
    overflow: hidden;
    background: transparent;
    box-shadow: 0 0 3px gray;
}

.circle div {
    display:table-cell;
    width:100%;
    height:100%;
    line-height:1em;
    text-align:center;
    vertical-align:middle;
    font-size: 7em;
    font-family:'Raleway', sans-serif;
    color:black;
}

#column {
    width: 13em;
}
#circles {
    margin: 0;
    padding: 0;
    list-style: none;
}
#circles li {
    float: left;
    margin:1.25%;
}
#wrapper {
    max-width: 60em;
    margin: 0 auto;
    padding: 0 5%;
}

<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>