めるちる's Room
リアル世界とWEB世界、この繋がりが面白い!
めるちる's Room > WEBデザイン > 横並びメニューをボーダーで区切る方法
Release: 2013/01/23 Update: 2019/09/25

横並びメニューをボーダーで区切る方法

フッターメニューを省スペースで横並びにする場合、リスト間にボーダーを表示させると見やすい。

ということで、メニューの区切り線(ボーダー)の挿入方法です。

/*footer-menu*/
#footer-menu{overflow: hidden; /* はみ出したものは隠す */}
#footer-menu ul{text-align:center; /* inline(横並び)のリストを中央揃えにする */}
#footer-menu li{display:inline;padding: 0 10px;border-left: 1px solid #fff; /* リストの左に区切り線(ボーダー)を表示させる */}
#footer-menu li:first-child {border: none; /* 一番目のリストのボーダーを無しにする */}
#footer-menu li a{text-decoration:none;color:#FFF;line-height:30px}
#footer-menu li a:hover{text-decoration:none;color:#FFbb77;}

:first-childを使用する場合、IE6は注意!
IE6対応対策も必要かもしれません。

#footer-menu li{margin-left: -1px; /* 負のマージンで左のボーダーを隠す */}

overflow:hiddenによって一番左側のボーダーが隠れて非表示となるはずです。

HOME