##現状
上記写真ではビゲーションとh1が2列になって配置されています。
ナビゲーションとh1をdivタグで囲み、display:flex;やfloatなどを試しましたが、意図した挙動にはなりませんでした。
##コード
html
1<div class="humberger"> 2 <input type="checkbox" name="" id="input"> 3 <div class="label_line"><!-- divタグで囲み、サイズ指定できるようにする --> 4 <label for="input"> 5 <!-- 三本線の為のdivタグ --> 6 <div class="line"></div> 7 <div class="line"></div> 8 <div class="line"></div> 9 </label> 10 </div> 11 12 <label for="input" class="back"><div></div></label> 13 <div class="nav_content"> 14 <nav> 15 <ul> 16 <li class="list"> 17 <span><img src="image/login.png" alt="login" class="nav_img"></span> 18 <a href="#">ログイン</a> 19 </li> 20 <li class="list"> 21 <span><img src="image/cart.png" alt="cart" class="nav_img"></span> 22 <a href="#">カートを見る</a> 23 </li> 24 </ul> 25 </nav> 26 </div> 27 <h1>ThePromontroy</h1> 28 </div>
css
1#input{ 2 display: none; 3 } 4 5 .line{ 6 width: 20px; 7 height: 3px; 8 background-color: black; 9 margin:3px ; 10 } 11 12 .nav_content{ 13 width: 200px; 14 height: 500px; 15 background-color:orange; 16 transform: translateX(-200px); 17 position: fixed; 18 } 19 20 input#input:checked ~ .nav_content{ 21 /* checkboxのinputが押されると紐付けたnavが開く */ 22 transform: translateX(0px); 23 transition:all 0.3s ease-out; 24 } 25 26 input#input:checked ~ .back{ 27 /* ラベルをnav以外の場所に行き渡る設定 ここでは黒い画面をタッチしたらnavが閉じる */ 28 position: absolute; 29 width: 100%; 30 height: 1500px; 31 background-color: rgba(0, 0, 0, 0.6); 32 }
###実現したいこと
こちらのサイトのようにハンバーガーメニューとh1を並列にしたいです。
自分のコードで言うと、<label for="input">と<h1>ThePromontroy</h1>を並列にしたいです。
##質問
どのような方法でナビゲーションとh1を並列にすることができますか?
回答1件
あなたの回答
tips
プレビュー