Css

シンプルなCSSタブ-アクティブなタブの境界線を破る必要があります



Simple Css Tabs Need Break Border Active Tab



解決:

EricMeyerによるこのソリューションを試してください。

以下のコンテンツは、サイトが閉鎖、変更、または中断した場合でも回答が有効であることを確認するために、サイトからコピーされたものです。



#navlist {パディング:3px 0;マージン左:0; border-bottom:1px solid#778;フォント:太字の12px Verdana、sans-serif; } #navlist li {リストスタイル:なし;マージン:0;表示:インライン; } #navlist li a {パディング:3px 0.5em;マージン左:3px;ボーダー:1pxソリッド#778; border-bottom:なし;背景:#DDE;テキスト装飾:なし; } #navlist li a:link {color:#448; } #navlist li a:visited {color:#667; } #navlist li a:hover {color:#000;背景:#AAE;ボーダーカラー:#227; } #navlist li a#current {背景:白; border-bottom:1pxソリッドホワイト; }
    

コードについてListamaticサイト内の一部のリストは、Listamaticの単純なリストモデルで機能するように変更する必要がありました。疑わしい場合は、最初に外部リソースを使用するか、少なくとも両方のモデルを比較して、どちらがニーズに合っているかを確認してください。


既存のコードをできるだけ変更しないでください-試してみてください表示:インラインブロックliタグ、境界線付き.menuコンテナdiv:



.menu {border-bottom:1px solid#666; } ul.tabHolder {オーバーフロー:非表示;マージン:1em 0 -2px;パディング:0; } ul.tabHolder li {リストスタイル:なし;表示:インラインブロック;マージン:0 3px;パディング:3px 8px 0;背景色:#444;ボーダー:1px実線#666;フォントサイズ:15px; } ul.tabHolder li.active {背景色:#944; border-bottom-color:#944; }

説明に使用されるHTML(アクティブなタブのdivカラーへのブレンドを示すために下部にdivを追加):

 
  • メニュー1
  • メニュー2
  • メニュー3