右寄せのメニューの作り方

HTML/CSSで右寄せメニューを作ります。

実装方法

リストを横並びにして、右寄せにする。

手順

1.スタイルを初期化する。

デフォルトのまんまだとダサいので、すべてのスタイルを初期化しましょう。

ol, ul {
   list-style: none;
}

必要な人はマージンとかパディングとかもリセットしておくとよし。

2.リストを横並びにしつつ右寄せする。

二つ目のリスト項目の左に一つ目のリスト項目が来るようにします。

li, ul {
   list-style: none;
   float:right;
}

これでとりあえず右寄せになるけど、このままだとメニューの左に要素が来てしまうので、

<div>
    <ul>
        <li></li>
    </ul>
</div>

このdivにoverflow:hidden;を付ける。overflowははみだしの制御をするやつなので、これで余計なのが来なくなります。

そのうちちゃんとコードと画像を乗っけたい。