前提・実現したいこと
CSSで"position: fixed;"によりヘッダーを固定したのですが、header-rightのリストがheader-left(タイトル)のすぐ隣に来てしまいます。
(親要素:header、子要素:header-right、header-left)
header-rightを画面右端に残したままヘッダーを固定したいのですが、どなたかお知恵を拝借願えませんでしょうか。
発生している問題・エラーメッセージ
該当のソースコード
HTML
1<header> 2 <div class="container"> 3 <div class="header-left"> 4 <h1 class="title">Bangkok Health Massage</h1> 5 </div> 6 <div class="header-right"> 7 <a href="#" style="text-decoration: none;">Top</a> 8 <a href="#" style="text-decoration: none;">Flow</a> 9 <a href="#" style="text-decoration: none;">Company</a> 10 <a href="#" style="text-decoration: none;">Contact</a> 11 <a href="#" class="btn faceook"><i class="fab fa-facebook-square"></i></a> 12 </div> 13 </div> 14 </header>
CSS
1header { 2 position: fixed; 3 top: 0px; 4 background-color: rgba(255,255,255,0.6); 5 height: 70px; 6 z-index: 10; 7} 8 9.header-left { 10 float: left; 11 right: 0; 12} 13 14.header-right { 15 float: right; 16 left: 0; 17 line-height: 70px; 18 font-size: 20px; 19 text-shadow: 1.5px 0.5px 0.5px #000000; 20}
試したこと
補足情報(FW/ツールのバージョンなど)
当方、HTML & CSSの知識しか持ち合わせておりません。
回答2件
あなたの回答
tips
プレビュー