我的定位已经恰好达到了我想要的效果,但是58周围的圆圈应该是一个完美的圆形,而不是根据容器中的内容进行调整。我该如何解决这个问题?
以下是它的样子:https://istack.dev59.com/Tb75A.webp 这是我需要它看起来像的样子:https://istack.dev59.com/LgQFI.webp
以下是 JSX 代码:
<div className="second-col-container">
<h2>Air Quality Index</h2>
<div className="mod-container">
<span className="index">58</span>
<div className="para-mod">
<span className="mod">Moderate</span>
<div>
Air quality is acceptable; however, for some pollutants there
may be a moderate health concern for a very small number of
people who are unusually sensitive to air pollution.
</div>
</div>
</div>
</div>
CSS
.second-col-container {
background-color: white;
width: 250px;
grid-area: air-index;
margin-top: 20px;
border-radius: 10px;
}
.second-col-container h2 {
margin-bottom: 20px;
margin-left: 10px;
}
.para-mod {
font-size: small;
width: 60%;
color: grey;
display: flex;
flex-direction: column;
margin-left: 10px;
}
.index {
margin: 5px 0 0 5px;
color: black;
font-size: xx-large;
border: 3px solid rgb(223, 217, 217);
border-left-color: rgb(255, 170, 11);
border-bottom-color: rgb(255, 170, 11);
padding: 15px;
border-radius: 100%;
}
.mod-container {
display: flex;
}
.mod {
font-size: large;
color: black;
}