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

/


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



Htmlの用意








CSSでボタンを作成する。



ulの操作



丸ぽちを取り除く




liの操作



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




aの操作



下線を消す。



テキストの装飾。




ここまでのまとめ1



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







本題



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

liにfloatで横並びになる。



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



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



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




ここまでのまとめ2



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






参考



http://uxmilk.jp/60712