HTML CSSにおいてレイアウト崩れが起きます。
ーー具体的には以下に参照画像を添付いたします。
レイアウト崩れのブラウザ
修正したい点と不明点
---ulタグでリストを中央に配置すると、ログインリンクが下に配置されたり、ずれて配置されてしまいます。
ulはブロック要素なので、この様な現象が起きることは予想していました。
###試したこと
-position プロパティを色々イジって強引に配置をずらす。
-display プロパティを
-ul要素とログインのaタグをflexboxに入れて、位置をずらしてみる。
HTMLとCSSのコード
コード ---HTML---- <header> <div class="container"> <div class="header-left"> <img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png"> </div> <div class="header-list"> <ul class="flex"> <li><a href="about.html">会社概要</a></li> <li><a href="">メンバー紹介</a></li> <li><a href="">レッスン一覧</a></li> <li> </li> </ul> <a href="#" class="login">ログイン</a> ----CSS---- header { position: relative; height: 60px; width: 100%; background-color: rgba(34, 49, 52, 0.9); position :fixed; top: 0; z-index: 10; color: white; display: flex; } .header-list { text-align: center; } .flex { display: flex; justify-content: center; } .header-list li { padding: 20px; margin-right: 10px; } .login { background-color: silver; display: block; padding: 20px; } .logo { width: 124px; margin-top: 20px; } .header-left { float: left; }
そもそものコードが間違っていると思うのですが、どの様なコーディングをするべきなのでしょうか?
御教授のほど何卒お願いい願いたいです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/06/11 07:02
2020/06/11 07:32 編集
2020/06/11 10:44