flexコンテナーである親要素に対して、justify-content:space-around;を設定して先頭と末尾の要素の余白を中の要素の余白と同じにしたいと考えています。
考えられる手段として、親要素の左右paddingで子要素を押し込める方法を取り微調整はできたのですが、きちんと計算する方法が知りたいと思い調べましたが分からなかったので質問させていただきました。
やりたいことは、AからBのように先頭と末尾の余白を調整することです。
以下htmlとcssのコードになります。
html
1<ul class="menu-child"> 2 <li><a href="#">日本記録</a></li> 3 <li><a href="#">U20日本記録</a></li> 4 <li><a href="#">U18日本記録</a></li> 5</ul>
css
1.menu-child { 2 width: 1050px; 3 padding: 1.5em; 4 background-color: #373737; 5 display: flex; 6 justify-content: space-around; 7} 8.menu-child li { 9 width: 30%; 10 text-align: center; 11background-color: #fff; 12}
上記コードは微調整前です。
ご回答よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/02/24 09:53