borderの中に均等に数字を入れる

初めまして。HTMLについて勉強をしているのですが、borderを使って一つの行を作ったのですが、その中に5つの数字(ここでは1)を均等に入れるためにはどのようにすればよろしいでしょうか？front leftをcenterに変えたりしてみたのですが上手くいきません。
5つのdivを１つの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{ 
2position:relative; 
3border-top:inset 1px #000000; 
4border-bottom:inset 1px #000000; 
5line-height:40px; 
6min-height:40px;
7font-size:25px;
8}
9.t-1{
10front: left;
11}
12.t-2{
13front: left;
14}
15.t-3{
16front: left;
17}
18.t-4{
19front: left;
20}
21.t-5{
22front: left;
23}

行動規範の内容に同意します

回答2件

frontというプロパティはありません。floatのことでしょうか。

まあ、やりたいのはたぶんこういうやつですよね。

CSS
1.l-1{ 
2  (提示された内容そのまま)
3  display: flex;
4  justify-content: space-evenly;
5}
6
7(.t-1から.t-5のスタイルを削除)

投稿2020/07/31 03:02

Daregada

総合スコア11990

ベストアンサー

cssにfrontという属性はないので、多分 float のtypoだと思いました。
やりたいことに合致しているかわかりませんが、こんな感じでしょうか

html
1<!DOCTYPE html>
2<html>
3    <head>
4        <style>
5            .l-1{ 
6            position:relative; 
7            border-top:inset 1px #000000; 
8            border-bottom:inset 1px #000000; 
9            line-height:40px; 
10            min-height:40px;
11            font-size:25px;
12            }
13            .t-1{
14                float: left;
15                width: 20%;
16            }
17            .t-2{
18                float: left;
19                width: 20%;
20            }
21            .t-3{
22                float: left;
23                width: 20%;
24            }
25            .t-4{
26                float: left;
27                width: 20%;
28            }
29            .t-5{
30                float: left;
31                width: 20%;
32            }
33        </style>
34    </head>
35    <body>
36        <div class="l-1">
37            <div class="t-1">1</div>
38            <div class="t-2">1</div>
39            <div class="t-3">1</div>
40            <div class="t-4">1</div>
41            <div class="t-5">1</div>
42        </div>
43    </body>
44</html>