我遇到了CSS和边框问题。我有this example运行良好,但我想要this one以同样的方式工作,我的意思是“.current”buttom的右边框(白色)必须与“.simpleTabsContent”边框重叠,但它不会,它位于div边界。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;}
我希望得到一些帮助。谢谢。
在Chrome中查看第一个小提琴时,按钮和内容之间存在间隙。这是故意的吗? –
不,这个差距并不是有意的,但它并不是什么东西,也不是我所要求的。我想要的是让按钮“.current”的边界与左边的“.simpleTabsContent”边框重叠。我使用Firefox并且没有显示差距,虽然在所有的浏览器中都是一样的,但我会用div来发布两张图片,但这并不是必要的,因为阿萨德给了我答案。 – IsabelPM
对于那些在Chrome中看到示例的人感到抱歉,我没有注意到Chrome中的差距。我必须添加一些图片,对不起,谢谢大家。 – IsabelPM