float right で li の順番が逆になってしまう

nav内のリストを右寄せにしたかったので float :right で解決!

かと思いきや li が右から順番に表示されてしまうらしく、意図していたものと真逆の順番で表示されてしまった・・・

f:id:lalune_webdedign:20201229115709p:plain
float: right で li が逆に

HTMLを逆に書いてもいいけど、なんか気持ち悪いので解決方法をググる

の2つの方法を見つけました。(多分他にもいろいろあると思います。)

アテンド様のブログの方法は私にはレベルが高かったので

親の div を float: right にして、li は float: left

の方法で解決しました。

親をright 子をleft で想定通りの表示に

HTML

    <header>
        <h1>LALUNE</h1>
        <div class=“navigation”>
            <nav class=“menu”>
                <ul>
                    <li>HOME</li>
                    <li>ITEM</li>
                    <li>CONTACT</li>
                </ul>
            </nav>
        </div>
    </header>

CSS

.navigation {
  floatright;
}
.menu li {
  floatleft;
  margin21px 10px;
  font-size2rem;
}

これで正しいのかは分かりませんが、一旦OK!

コメント

タイトルとURLをコピーしました