<li>の幅を狭くしたい。

Question

前提・実現したいこと

navメニューの幅を狭く等間隔で、画面中央に設置したい。

該当のソースコード

html
<!-- 下部のメニュー一覧 -->
<div class="footer">
<ul id="nav3">
<li><a href="#">ニュースレター</a></li>
<li><a href="#">店舗検索機能</a></li>
<li><a href="#">よくある質問</a></li>
<li><a href="#">ご返金またはご交換</a></li>
<li><a href="#">お支払い</a></li>
<li><a href="#">お問い合わせ</a></li>
<li><a href="#">法的区域</a></li>
<li><a href="#">個人情報保護方針</a></li>
<li><a href="#">採用情報</a></li>
<li><a href="#">サイトマップ</a></li>
</ul>
</div>

#nav3 {
list-style: none;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}

#nav3 li {
font-size: 10px;
line-height: 14px;
color: black;
width: 20%;
text-align: center;
}

Comments

[Lhankor_Mhy]

3-7. markdownを利用しましょう
https://teratail.com/help/question-tips#questionTips3-7

Answer 1

width を小さくすればいいのでは。
たとえば：

#nav3 li {

font-size: 10px;
line-height: 14px;
color: black;
/* width: 20%; */
width: 10%;
text-align: center;
} 

Comments

[miyamiyamiya]

ご回答ありがとうございます！解決致しました！

Answer 2

justify-content: space-between;で既に等間隔なので、#nav3のwidthを縮めて、中央寄せするようにしたらいいのではないでしょうか。
一例ですが、以下のコードのように記述して幅を狭めて中央寄せする方法もあります。

nav3 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  //以下、追加分
  padding: 0; //ul要素のpaddingの打ち消し
  max-width: 600px;
  width: 90%;
  margin: 0 auto;
}

Comments

[miyamiyamiya]

ご回答ありがとうございます！解決致しました！