電子書籍の厳選無料作品が豊富!

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

以下は「左」のみの指定、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;
}

A 回答 (1件)

左にborderを指定されているとのことですが、ソース上には無いですよね?


とりあえずaの左に指定されていると仮定してお答えします。
(間違いだったらごめんないさ;;)

単純に右端のaにクラス指定(例:class="end")をして、

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

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

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

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

お礼日時:2007/07/02 14:03

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!