円と円の間に隙間を空けて並べたい

Question

初めまして。HTMLについて勉強をしています。borderを使って一つの行を作り、その中に5つの数字(ここでは1)が均等に入っています。この数字に円をつけて装飾をしているのですが、数字の間隔をwidthで指定しているためか、真円にならず楕円になってしまいます。行の高さを変えずに真円にし、円と円の間に隙間を空けてきれいに並べるにはどうすればいいでしょうか？
5つのdivを１つのdivでまとめた状態(今の状態)で行いたいです。アドバイスいただけたら嬉しいです。

<div class="l-1">
<div class="t-1">1</div>
<div class="t-1">1</div>
<div class="t-1">1</div>
<div class="t-1">1</div>
<div class="t-1">1</div>
</div>

.l-1{
position:relative;
text-align:center;
padding:2px;
border-top:inset 1px #000000;
border-bottom:inset 1px #000000;
line-height:4vw;
min-height:4vw;
font-size:2.5vw;
}

.t-1{
float:left;
width:20%;
height:20%;
border-radius:50%;
background:red;
}

Answer 1

l-1のdivに対して、display: flexをつけると良いかと思います。

.l-1{
position:relative;
text-align:center;
padding:2px;
border-top:inset 1px #000000;
border-bottom:inset 1px #000000;
line-height:4vw;
min-height:4vw;
font-size:2.5vw;

/* flexにする */
display: flex;
justify-content: space-between;
}

.t-1{
float:left;
width:18%; /* 20%だとぴったりになってしまうので、スペース開けるためにちょっと小さくしました。調整してください*/
height:20%;
border-radius:50%;
background:red;
}

flexについてはこちらが詳しいです。
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout

Comments

[paruru]

ありがとうございます！
上手くいきました！