HTML　li リスト内要素を整列させたい

こんにちは
教えていただけますでしょうか。

HTML勉強中ですが、
複数のアイテムそれぞれに説明書（PDF）と動画（MOVIE)へのリンクページを作成しました

・AAA　PDF　MOVIE
・B　PDF　MOVIE

このようになっておりますが、PDF　や　MOVIE　の文字を縦にそろえたいのです
span,margin など工夫したのですが、いまいち解決に至りません。

お力添えをお願い致します。

（AAA,Bのアイテム名称長さは変更不可です）

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="utf-8">
5
6    <style>
7        .mgn{
8            margin-right: 120px ;  
9        }
10    </style>
11</head>
12
13<body>
14    <ul>
15        <li>AAA<a href="AAA.pdf"><span class="mgn"></span>PDF<span class="mgn"><a href="AAA.mp4">MOVIE</span></a></li>
16        <li>B<a href="B.pdf"><span class="mgn"></span>PDF<span class="mgn"><a href="B.mp4">MOVIE</span></a></li>
17    </ul>
18</body>
19</html>

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

回答2件

ベストアンサー

参考にしてください。

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="utf-8">
5
6    <style>
7      .item-container {
8        display: flex;
9      }
10      .title,.pdf,.movie {
11        width: 8em;
12      }
13    </style>
14</head>
15
16<body>
17    <ul>
18      <li>
19        <div class="item-container">
20          <div class="title">AAA</div>
21          <div class="pdf"><a href="AAA.pdf">PDF</a></div>
22          <div class="movie"><a href="AAA.mp4">MOVIE</a></div>
23        </div>
24      </li>
25      <li>
26        <div class="item-container">
27          <div class="title">B</div>
28          <div class="pdf"><a href="B.pdf">PDF</a></div>
29          <div class="movie"><a href="B.mp4">MOVIE</a></div>
30        </div>
31      </li>
32    </ul>
33</body>
34</html>

投稿2021/06/08 11:38

itagagaki

総合スコア8402

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="utf-8">
5
6    <style>
7        .mgn{
8            margin-right:120px;  
9        }
10        .mgna{
11            margin-right:140px;
12        }
13    </style>
14</head>
15
16<body>
17    <ul>
18        <li>AAA<a href="AAA.pdf"><span class="mgn"></span>PDF<span class="mgn"><a href="AAA.mp4">MOVIE</span></a></li>
19        <li>B<a href="B.pdf"><span class="mgna"></span>PDF<span class="mgn"><a href="B.mp4">MOVIE</span></a></li>
20    </ul>
21</body>
22</html>