CSSで横並びでメニューボタン配置してみる

うやむやにしてきたメニューボタンの作り方。
これを機会に一から作ってみる。





Htmlの用意







CSSでボタンを作成する。



### ulの操作
丸ぽちを取り除く




### liの操作
横幅を指定、背景色ボーダライン、テキストを中央に




### aの操作
下線を消す。



テキストの装飾。




ここまでのまとめ1


現状のCSSをまとめるとこんな感じになっている。







本題


いよいよ横並びにしてく。

liにfloatで横並びになる。



このままだと次の要素も回り込んでしまうので、ulに回り込みをさせないための処理を追加。



ボタンの高さを指定して、縦の中央に文字が並ぶようにする。
line-heightをheightと同じ値にすることで実現できる。



ボタン同士の隙間を空ける。ボタンを押しやすいようにpaddingも指定する。




ここまでのまとめ2


CSSをまとめるとこうなる。







参考


http://uxmilk.jp/60712




あなたにおすすめ