Q&A
コメントありがとうございます！
ul要素全体を右寄せしたいです。
20220307
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 6<meta charset="utf-8"/> 7<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0"> 8 9 <title>よくある質問</title> 10 11<style> 12.body{ 13 font-family: "游ゴシック", "ヒラギノ角ゴ ProN", "メイリオ", "MS Pゴシック", sans-serif; 14 margin: 0; 15 padding: 0; 16} 17 .header{ 18 margin: 0; 19 padding: 0; 20} 21 /*灰色のbackgroundを目一杯広げたいがうまくいかない*/ 22 23@media (min-width: 768px) {/*PC版*/ 24#gNaviMenu { 25 background-color: #E5E5E5; 26 display: flex; 27} 28#gNaviMenu ul { 29 text-align: right;/*ul全体を右寄せしたい*/ 30} 31#gNaviMenu ul.mainMenu li { 32 display: inline-block; 33 margin-top: 70px; 34 margin-right: 0px; 35} 36#gNaviMenu ul.mainMenu li a { 37 font-size: 14px; 38 font-weight: bold; 39 color: #73683b; 40 text-decoration: none; 41} 42#gNaviMenu ul.mainMenu li span{ 43 color: white; 44 background-color:#73683b; 45 padding: 20px 40px; 46} 47#gNaviMenu .logo img{ 48 width:300px; 49 height:auto; 50 margin: 20px 0px 0px 60px; 51} 52} 53@media (max-width: 767px) {/*スマホ版*/ 54#gNaviMenu { 55padding:20px 20px; 56} 57#gNaviMenu .logo { 58text-align: center;/*imgの中央寄せ*/ 59} 60#gNaviMenu .logo img{ 61width:260px; 62height:auto; 63margin-top: 20px;/*もっと大枠の要素とぶつかってる、inline要素では上下のmargin,paddingは効かない*/ 64} 65} 66 67</style> 68</head> 69 70<body> 71 <article id="wrapper"> 72 <header id="header"> 73 <div id="gNavi"> 74 <div id="gNaviBtn"> 75 <span></span><span></span><span></span> 76 </div> 77 <nav id="gNaviMenu"> 78 <div class="logo"><img src="img/black.png" alt="black"/></div> 79 <ul class="mainMenu"> 80 <li><a href="/fukuske/">要素①</a></li> 81 <li><a href="/fukuske/#itemList">要素②</a></li> 82 <li><a href="concept.html">要素③</a></li> 83 <li><a href="craftsmanship.html">要素④</a></li> 84 <li><a href="history.html"><span>ボタン</span></a></li> 85 </ul> 86 </nav> 87 </div> 88 </header> 89 </article> 90</body>
よろしくお願いいたします。
回答2件
0
ベストアンサー
フレックスアイテムの主軸方向（デフォルトでは水平方向）の配置は、justify-contentで設定できます。
css
1 #gNaviMenu { 2 background-color: #E5E5E5; 3 display: flex; 4 justify-content: space-between; /* ←これ */ 5 }
投稿2022/03/07 04:32
総合スコア37411
0
右寄せではなく右にずらしたいだけなら左のマージンを多めに取ればよいでしょう
投稿2022/03/07 03:57
総合スコア117622
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/03/07 06:55