プログラミング

div要素の横幅について

投稿日:

おはようございます。優灯です。

前回の続きで、画面の縮小に対応する
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;
}

-プログラミング

Copyright© ヒキカツ!ひきこもりのブログ , 2021 All Rights Reserved Powered by STINGER.

%d人のブロガーが「いいね」をつけました。