リストを横に並べてメニューを作成するサンプル。
区切りありのシンプルなメニュー
「display: inline-block;」とすることでリストタグを横並びにすることが可能。
また、「list-style: none;」とすることで、リストの先頭プレフィックスを非表示にすることが可能。
See the Pen navigation1 by yuichi (@yhamada1205) on CodePen.
ボタン風に横に並べたメニュー
「display: inline-block;」とした際に間に隙間ができてしまうが、「font-size: 0;」を入れることで隙間なく表示することができる。
See the Pen navigation2 by yuichi (@yhamada1205) on CodePen.
ボタン風に横に並べたメニュー(枠あり)
See the Pen navigation3 by yuichi (@yhamada1205) on CodePen.
2段になっているシンプルなメニュー
See the Pen navigation4 by yuichi (@yhamada1205) on CodePen.
タブ風なメニュー
折り返さずに、スクロールをする場合は「white-space:nowrap;」とする。
またスクロールバーを表示する場合は「overflow-x: scroll;」を設定する。
See the Pen navigation5 by yuichi (@yhamada1205) on CodePen.