初めまして。HTMLについて勉強をしているのですが、borderを使って一つの行を作り、その中に5つの数字(ここでは1)を入れています。今のソースコードにした場合、文字自体に◯はつかず、文字の位置に調整させなければいけません。文字自体に◯をつけるにはどうすればいいでしょうか?現在は最初に1文字にのみ適用させようとしている状態です。
5つのdivを1つのdivでまとめた状態(今の状態)で行いたいです。アドバイスいただけたら嬉しいです。
html
1<div class="l-1"> 2<div class="t-1">1</div> 3<div class="t-2">1</div> 4<div class="t-3">1</div> 5<div class="t-4">1</div> 6<div class="t-5">1</div> 7</div>
css
1.l-1{ position:relative; 2 border-top:inset 1px #000000; 3 border-bottom:inset 1px #000000; 4 line-height:40px; 5 min-height:40px; 6 font-size:25px; 7 } 8.t-1{ 9float: left; 10width:20px; 11height:20px; 12border-radius:50%; 13background:skyblue; 14} 15.t-2{ 16float: left; 17} 18.t-3{ 19float: left; 20} 21.t-4{ 22 float: left; 23} 24.t-5{ 25 float: left; 26}
回答1件
あなたの回答
tips
プレビュー