文字に◯をつける方法

Question

初めまして。HTMLについて勉強をしているのですが、borderを使って一つの行を作り、その中に5つの数字(ここでは1)を入れています。今のソースコードにした場合、文字自体に◯はつかず、文字の位置に調整させなければいけません。文字自体に◯をつけるにはどうすればいいでしょうか？現在は最初に1文字にのみ適用させようとしている状態です。
5つのdivを１つのdivでまとめた状態(今の状態)で行いたいです。アドバイスいただけたら嬉しいです。

<div class="l-1"> 
<div class="t-1">1</div> 
<div class="t-2">1</div> 
<div class="t-3">1</div> 
<div class="t-4">1</div> 
<div class="t-5">1</div> 
</div>

.l-1{ position:relative;
 border-top:inset 1px #000000;
 border-bottom:inset 1px #000000;
 line-height:40px;
 min-height:40px;
 font-size:25px;
 } 
.t-1{
float: left;
width:20px;
height:20px;
border-radius:50%;
background:skyblue;
} 
.t-2{
float: left; 
}
.t-3{ 
float: left; 
} 
.t-4{
 float: left; 
} 
.t-5{
 float: left; 
}

Comments

[Lhankor_Mhy]

froat
は
float
では

[m.ts10806]

○ってどういう状態でしょうか。

[paruru]

指摘ありがとうございます。floatに修正しました。

Answer 1

こういうことですか？

.l-1 div{ position:relative;
 border-top:inset 1px #000000;
 border-bottom:inset 1px #000000;
 line-height:40px;
 min-height:40px;
 font-size:25px;
float: left;
width:20px;
height:20px;
border-radius:50%;
background:skyblue;
}