※ お手数ですが、Code Pen のResult欄を0.25xにしてご覧ください。
See the Pen headerサンプル by 熊瀬川直也 (@momonoki1990) on CodePen.
- div.header-innerで両padding内側寄せ
- ヘッダーの中に横並びにしたい
div liはdisplay: inline-block;かけておく - 全体を左と右の両端寄せにするため、
header-innerにdisplay: flex; justify-content: space-between; align-items: center; - header-innerの子タグはdiv二つ(left,right)にまとめる
- 左に寄せた中div.leftの中で距離をとりたいので、div.genderに
margin-left - 並びにするものは
ul liをlist-style: none; margin: 0;をかけて使う。 -
liに上下paddingかけて、ヘッダーの高さを押し広げる。aタグにかけた場合は、リンクの選択範囲がヘッダーの高さ分まで広がる - 適宜
li.currentにbackground-colorつけて選択されていることを示す