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

这可以通过简单地为两个主要元素提供适当的 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 { 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: 3px; }

而不是填充：0；我已将其设置为 padding-right:3px;

http://jsfiddle.net/VS7fn/

于 2012-12-05T13:21:39.897 回答
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 回答