0

テーブルを使用して作成されたメニューがあります (可能であれば、リストなどに変更する必要のない回答を提供してください... 申し訳ありません)。

とにかく、選択されている項目を除いて、各メニュー項目の間に区切りを追加したいと思います。メニュー項目が選択されている場合、border-right が存在しないようにしたいという意味です。添付の画像をご覧ください。

ここに画像の説明を入力

ご覧のとおり、お問い合わせが選択されています。ただし、ナレッジ メニュー項目の境界線は引き続き表示されます。これを取り除く方法はありますか？

現時点でのcssは次のとおりです。

div#nav a{
   color: #FFFFFF;
   border-right: 1px solid red;
}

div#nav td.selected a{
   color: #004466;
   border-right: none;
}

HTML:

    <div id="nav">
      <table id="navTable" cellspacing="0" cellpadding="0">
        <tr>
            <td><a href="Knowledge">Knowledge</a></td>
            <td><a href="Enquiries">Enquiries</a></td>
            <td><a href="Contact">Contact</a></td>
        </tr>
      </table>
    </div>

「選択した」メニュー項目の隣にある項目の右端を削除するのに役立つ CSS トリックはありますか? 注: 役立つ場合は、border-left も使用できます。

どんな洞察も非常に役に立ちます。ありがとうございました！！

4

2 に答える 2

0

これでうまくいくはずです：

div#nav a {
   border-left: 1px solid red;
}

div#nav td:first-child a, div#nav td.selected a, div#nav td.selected + td a {
   border-left: none;
}

ここでフィドルを参照してください：http://jsfiddle.net/zitrusfrisch/WNTBH/

于 2013-11-02T21:14:14.457 に答える