本日三度目の質問です。
何度も申し訳ございません。
footerの中にあるliを横並び、均等配置にするため、flexboxでjustify-contentを使用してみたのですが、何故か縦並びになってしまいました。(画像一枚目)
その後、display:inlineを使用したところ、横並びにはなりましたが、範囲内の均等配置にすることが出来ませんでした。(画像二枚目)
現在は、画像二枚目の状態でサイトに表示されています。
ご助言頂けると大変助かります。
何卒よろしくお願い申し上げます。
【記述コード】
<footer> <ul id="ulnav" class="sp"> <li><a href="#">HOME</a></li> <li><a href="http://www.kimijimaya.co.jp/co_profile.html">横浜君嶋屋とは</a></li> <li><a href="http://www.kimijimaya.co.jp/shop_profile.html">店舗案内</a></li> <li><a href="http://shopping.kimijimaya.co.jp/smartphone/">オンラインショップ</a></li> <li><a href="http://www.kimijimaya.co.jp/english.html">English</a></li> </ul> <ul id="ulnav" class="pc"> <li><a href="#">HOME</a></li> <li><a href="http://www.kimijimaya.co.jp/co_profile.html">横浜君嶋屋とは</a></li> <li><a href="http://www.kimijimaya.co.jp/shop_profile.html">店舗案内</a></li> <li><a href="http://shopping.kimijimaya.co.jp">オンラインショップ</a></li> <li><a href="http://www.kimijimaya.co.jp/english.html">English</a></li> </ul> <p>© 2005 Yokohama Kimijimaya Co., Ltd.</p> </footer> footer ul{ width: 40%; margin:1% auto; display: flex; justify-content: space-between; } footer ul li{ width: calc(100%/5); text-align: left; margin-right: 5%; /* display: inline;*/ }
回答1件
あなたの回答
tips
プレビュー