Question

我遇到了css和边框问题。我this example工作得很好，但我希望this one以相同的方式工作，我的意思是“.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;}

我很感激一些帮助。谢谢。

Answer 1

原始链接http://jsfiddle.net/LLVtr/在按钮和最新Chrome中的消息之间存在差距。通过在版本2中为消息添加边距将使其看起来相同。

添加到#msg

margin-left: 2px;

结果：

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

Answer 2

这可以通过简单地给两个主要元素提供适当的z-index值来解决。要div.simpleTabs添加：

position:relative; z-index: 2;

要div.simpleTabsContent添加：

position:relative; z-index: 1;

现在simpleTabs div与simpleTabsContent div重叠，这意味着您现在可以看到更改的边框。以下是演示：http://jsfiddle.net/WEBnc/

Answer 3

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;
}

Answer 4

div.simpleTabs { width: 90px;float:left;padding-right: 3px; }

而不是填充：0;我已经填充右边：3px;

http://jsfiddle.net/VS7fn/

Answer 5

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;
}

它适用于你。

div边框重叠按钮边框，如何反转呢？

5 个答案: