CSSボーダーの設定（横並びボタンの間にだけボーダーを）

質問

教えてください。
横並びのナビボタンを作成したのですが、ボタンが隣接する箇所だけにボーダーを設定することは可能なのでしょうか。
左だけ指定しますと、右端のボタンの右の線がなく、左端のボタンには左に線がでて、バランスが悪いです。
左右に指定すれば、合間だけ線が太くなります。
かつ、現在ページ（リンクなし）ボタンは、下の線は設定なしで、他ページへのボタン(リンクのあるページへのナビボタン）は下部に線を入れてます。

以下は「左」のみの指定、hover時の下部線を設定しています。
よろしくご指導お願い申し上げます。

ul#lc_navi{
margin: 0px;
font-size: 12px;
font-weight: bold;
color: #646464;
list-style-type:none;
width:754;
}

ul#lc_navi li{
display:block;
float: left;
width: 150px;
height:22px;
list-style-type: none;
text-align: center;
font-weight: bold;
line-height:20px;
color: #646464;
background-color:#FFFFFF;
}
ul#lc_navi a{
width:150px;
height:22px;
text-decoration:none;
color: #646464;
background-color:#E9C3F6;
border-bottom: solid;
border-width:1px;
}

ul#lc_navi a:hover{
background-position:top center;
text-decoration:underline;
color: #646464;
background-color:#E1F9FA;
}

回答No.1

bodhisraba · ベストアンサー

左にborderを指定されているとのことですが、ソース上には無いですよね？
とりあえずaの左に指定されていると仮定してお答えします。
（間違いだったらごめんないさ；；）

単純に右端のaにクラス指定（例：class="end"）をして、

ul#lc_navi a への指定の後に、

ul#lc_navi a.end{
border-right:1px solid #333;
}

のように上書きしてはいかがでしょうか？
動的なメニューですと、リストの最後であることを判別する必要はありますが・・・

お礼

お返事をありがとうございます。ご連絡が遅くなり、申し訳ございませんでした。
中途半端なソースへ、ご丁寧にご指導いただき、感謝しております。上書きで修正をかけていくことを、自分で試さず、人の手を借りてしまい、申し訳ありません。大変参考になりました。勉強に励みます。