<li>の指定した文字から行下げをしたい。

（画像のように）<li>の"法的区域"から行下げをして<li>を中央揃えの二行にしたい。

html
1    <div class="footer">
2      <ul id="menu">
3        <li><a href="#">ニュースレター</a></li>
4        <li><a href="#">店舗検索機能</a></li>
5        <li><a href="#">よくある質問</a></li>
6        <li><a href="#">ご返金またはご交換</a></li>
7        <li><a href="#">お支払い</a></li>
8        <li><a href="#">お問い合わせ</a></li>
9        <li><a href="#">法的区域</a></li>
10        <li><a href="#">個人情報保護方針</a></li>
11        <li><a href="#">採用情報</a></li>
12        <li><a href="#">サイトマップ</a></li>
13       </ul>

css
1.footer {
2  margin-top: 450px;
3}
4
5#menu {
6  list-style: none;
7  display: flex;
8  justify-content: space-between;
9  flex-wrap: wrap;
10  max-width: 530px;
11  width: 60%;
12  margin: 0 auto;
13}
14
15#menu li {
16  font-size: 10px;
17  line-height: 14px;
18  color: black;
19  width: 20%;
20  text-align: center;
21}

yambejp

2021/07/21 06:46

手書きでいいので図示して下さい

miyamiyamiya

2021/07/21 06:50

画像を挿入しました。

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

回答1件

ベストアンサー

CSS
1.footer {
2  margin-top: 450px;
3}
4
5#menu a{
6word-break:keep-all;
7}
8#menu {
9list-style: none;
10  display: flex;
11  justify-content:center;
12  flex-wrap: wrap;
13  max-width: 530px;
14  width: 60%;
15  margin: 0 auto;
16}
17
18#menu li {
19  font-size: 10px;
20  line-height: 14px;
21  color: black;
22  width: 16%;
23  text-align: center;
24}