0

CSS と境界線に問題があります。この例はうまく機能していますが、これも同じように機能させたいと思います。つまり、「.current」ボタンの右側の境界線 (白) が「.simpleTabsContent」境界線と重なっている必要がありますが、そうではありません。 div ボーダーの後ろ。

z-index で試しましたが、変更はありませんでした。私は多くのことを試しましたが、何もうまくいきませんでした。

CSSコードが思い通りに動かない:

div.simpleTabs { width: 90px;float:left;padding: 0; }
ul.simpleTabsNavigation { margin: 10px -1px 0 0; padding:0; text-align:left;}
ul.simpleTabsNavigation li { list-style:none; display:inline; padding:0; }
ul.simpleTabsNavigation li button {
margin-bottom: 3px;width: 100%; color:#41635e; border:1px solid #6DA69D;
padding:3px 6px; background:#b6d2ce; font-size:12px; font-weight: bold;
text-decoration:none; font-family: Verdana; }
ul.simpleTabsNavigation li button:hover { background-color:#d3e4e1; }
ul.simpleTabsNavigation li button.current {
background:#ffffff; color:#6da69d; border-right:1px solid #ffffff;}
div.simpleTabsContent { border:1px solid #6DA69D; padding:0px 5px 5px 10px; }
#msg{float:left;  width:350px;  padding: 5px 10px;  margin-top:10px;}
#container{ margin: 0; width: 500px; position: relative;}

私が望むように動作するCSSコード:

div.simpleTabs { padding: 5px 0 0 5px; }
ul.simpleTabsNavigation { margin:0 10px -1px 10px; padding:0; text-align:left; }
ul.simpleTabsNavigation li { list-style:none; display:inline; margin:0; padding:0; }
ul.simpleTabsNavigation li button {
color:#41635e; border:1px solid #6DA69D; padding:3px 6px; background:#b6d2ce;
font-size:12px; font-weight: bold; text-decoration:none; font-family: Verdana; }
ul.simpleTabsNavigation li button:hover { background-color:#d3e4e1; }
ul.simpleTabsNavigation li button.current {
background:#ffffff; color:#6da69d; border-bottom:1px solid #ffffff; }
div.simpleTabsContent { border:1px solid #6DA69D; padding:5px 15px }
#msg{ margin: 0 5px 5px 10px;}
#container{ margin: 0; float: left; width: 450px;  position: relative;}

助けていただければ幸いです。ありがとうございました。

4

5 に答える 5

1

元のリンクhttp://jsfiddle.net/LLVtr/には、最新の Chrome のボタンとメッセージの間にギャップがあります。バージョン 2 のメッセージにマージンを追加すると、同じように見えます。

#msgに追加

margin-left: 2px;

結果：

http://jsfiddle.net/GfENx/3/

于 2012-12-05T13:18:26.550 に答える
1

これは、2 つの主要な要素に適切な z-index 値を与えるだけで解決できます。div.simpleTabs追加するには:

position:relative; z-index: 2;

div.simpleTabsContent追加するには:

position:relative; z-index: 1;

これで、simpleTabsdiv が div に重なりsimpleTabsContentます。これは、変更された境界線が表示されるようになったことを意味します。ここにデモンストレーションがあります：http://jsfiddle.net/WEBnc/

于 2012-12-05T13:26:33.087 に答える
0 
div.simpleTabs { width: 90px;float:left;padding-right: 3px; }

パディングの代わりに：0; パディングしました-right：3px;

http://jsfiddle.net/VS7fn/

于 2012-12-05T13:21:39.897 に答える
0 
div.simpleTabs { position: relative; width: 90px;float:left;padding: 0; z-index: 1; margin-right: -1px;}

ul.simpleTabsNavigation { margin: 10px 0px 0 0; padding:0; text-align:left;}

ul.simpleTabsNavigation li { list-style:none; display:inline; padding:0; }

ul.simpleTabsNavigation li button { 
    margin-bottom: 3px;width: 100%; color:#41635e; border:1px solid #6DA69D; 
    padding:3px 6px; background:#b6d2ce; font-size:12px; font-weight: bold; 
    text-decoration:none; font-family: Verdana; }

ul.simpleTabsNavigation li button:hover { background-color:#d3e4e1; }

ul.simpleTabsNavigation li button.current { 
    background:#ffffff; color:#6da69d; border-right: 1px solid #fff;}

div.simpleTabsContent { border:1px solid #6DA69D; padding:0px 5px 5px 10px; }

#msg{float:left;  width:350px;  padding: 5px 10px;  margin-top:10px;}

#container{ margin: 0; width: 500px; position: relative;
}
​
于 2012-12-05T13:16:38.353 に答える
0 
div.simpleTabs { width: 90px;float:left;padding-right: 0px; position: absolute;}

ul.simpleTabsNavigation { margin: 10px -1px 0 0; padding:0; text-align:left;}

ul.simpleTabsNavigation li { list-style:none; display:inline; padding:0; }

ul.simpleTabsNavigation li button {
    margin-bottom: 3px;width: 100%; color:#41635e; border:1px solid #6DA69D;
    padding:3px 6px; background:#b6d2ce; font-size:12px; font-weight: bold;
    text-decoration:none; font-family: Verdana; }

ul.simpleTabsNavigation li button:hover { background-color:#d3e4e1; }

ul.simpleTabsNavigation li button.current {
    background:#ffffff; color:#6da69d; border-right:1px solid #ffffff;}

div.simpleTabsContent { border:1px solid #6DA69D; padding:0px 5px 5px 10px; }

#msg{float:left;  width:350px;  padding: 5px 10px;  margin-top:10px; margin-left:90px;}

#container{ margin: 0; width: 500px; position: relative;
}

それはあなたのために働くでしょう。

于 2012-12-05T13:33:48.317 に答える