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

   2014/06/26

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

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

/*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によって一番左側のボーダーが隠れて非表示となるはずです。

  • このエントリーをはてなブックマークに追加
  • Pocket

コメントを残す