おはようございます。優灯です。
前回の続きで、画面の縮小に対応する
PC版レスポンシブデザインの課題を作成していたのですが、
わからないところが出てきました。
左上のロゴの部分ですが、div要素が横に伸びすぎて画面を小さくした時、
右メニューと干渉してしまいます。
div要素の横幅が小さくなるか、画面を縮小したときに
ここの幅も追従して小さくなってくれれば良いのですが、
上手くいきません。
また、左右のアイコンとメニューを新しい親divで囲み
一緒に縮小させる作戦も考えたのですが、上手く囲めていないのか
CSSが適用されずできませんでした。
多分物凄く簡単な問題ではあると思うのですが、解決できず
困っております。
自己解決できないといけない問題ではあると思うのですが、
半分お手上げですので、サラッとヒントだけでも頂けると嬉しいです。
一応関係ありそうな部分のコードは載せておきます。
よろしくお願い致します。
<header><div class="left-icon"><img src="images/logo_white.png" alt="" class="left_inner_image"></div><div class="right-menu"><ul><li><a href="">Q&A</a></li><li><a href="">ログイン</a></li><li><a href="">新規登録</a></li></ul></div></header>
* {background-color: #3bb2b8;margin: auto;}header {height: 20%;}.left-icon {margin: 0% 5%;float: left;}.left_inner_image {width: 40%;}.right-menu {float: right;margin: 2% 3%;}.right-menu li {float: left;list-style: none;padding: 10px;margin-right: 20px;background-color: orange;}.right-menu a {background-color: orange;color: white;text-decoration: none;}