ハンバーガーメニューの隣に画像を配置し、リンクを飛ばしたいのですが
float: rightが効きません。
CSSのどのあたりが誤っていますでしょうか?
宜しくお願い致します。
CSS
.onlinelink{ width: auto; float: right; position: fixed; margin-right:20px; } .onlinelink img{ position: absolute; } /*gnav ハンバーガーメニュー*/ .gnav{ background: rgba(0,0,0,0.8); display: none; height: 100%; position: fixed; width: 100%; z-index: 98; } .gnav__wrap{ align-items:center; display: flex; height: 120%; justify-content: center; position: absolute; width: 100%; } .gnav__menu__item{ list-style: none; } .gnav__menu__item a { color: #FFF; font-size: 1em; display: block; width: 100%; padding: 8px 30px 8px 30px; border: 1px solid; text-decoration: none; transition: .5s; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; text-align: center; margin: 15px 0 15px 0; } .gnav__menu__item a:hover{ color: #666; }
html
<div class="header"> <a class="menu"> <span class="menu__line menu__line--top"></span> <span class="menu__line menu__line--center"></span> <span class="menu__line menu__line--bottom"></span> </a> <nav class="gnav"> <div class="gnav__wrap"> <ul class="gnav__menu"> <div id="menu_sns"> <div class="container"> <div class="row"> <div class="col-4 text-center"> <a href=“#” target="_blank"><img src="img/A.png" alt=""></a> </div> <div class="col-4 text-center"> <a href=“#” target="_blank"><img src="img/B.png" alt=""></a> </div> <div class="col-4 text-center"> <a href=“#” target="_blank"><img src="img/C.png" alt=""></a> </div> </div> </div> </div><!--menu_sns end--> <li class="gnav__menu__item"><a href="/">トップ</a></li> <li class="gnav__menu__item"><a href="ofer.php#full_photo04">AAAAAA</a></li> <li class="gnav__menu__item"><a href="ofer.php#full_photo05">BBBBBB</a></li> <li class="gnav__menu__item"><a href="ofer.php#full_photo06">CCCCCC</a></li> </ul> </div><!--gnav-wrap--> </nav> </div><!--header end--> <div class="onlinelink"><img src="img/kari.jpg" alt=""></div>
回答1件
あなたの回答
tips
プレビュー