如何在包含div的底部边界处放置按钮（白色）的底部边框

我正在尝试使用按钮制作标签。所以选中的按钮的类改变了，所以底部边框现在变成了白色。如何在包含div的底部边界处放置按钮（白色）的底部边框

效果是使它看起来像连接页面的一部分。但是，当我添加margin-bottom时：-2px;到班级 - 希望覆盖我的DIV边界的部分 - 它仍然显示div边界。

如果我把它设置为-3px，那么我得到白底的div ...但是现在我有1像素的左边和右边框粘在底部下方...... overflow：hidden does not work，because it set sets me回到DIV边框显示...

之前有人遇到过这个问题吗？

谢谢！托德

这里是-2px - 请注意，蓝色的边框依然呈现： enter image description here

，这里是如果给它-3px ... NOW蓝方的边界通过（啊！） enter image description here 坚持会发生什么

这里是HTML：

<div style="border-bottom:1px solid #A3C0E8; width:556px;"> 
     <asp:Button Text="Settings" ID="btnViewSettings" runat="server" class="dxpButton_AquaTab" Visible="false" CausesValidation="false" CommandArgument="0" OnClick="SwitchView" /> 
     <asp:Button Text="Links" ID="btnViewLinks" runat="server" Visible="false" class="dxpButton_AquaTab" CausesValidation="false" CommandArgument="1" OnClick="SwitchView"/> 
     <asp:Button Text="Test Data Source" ID="btnTestLoader" runat="server" class="dxpButton_AquaTab" CausesValidation="false" Visible="false" CommandArgument="2" OnClick="btnLoaderTest_click"/> 
     <asp:Button Text="Test Import" ID="btnTestConverter" runat="server" class="dxpButton_AquaTab" CausesValidation="false" Visible="false" CommandArgument="2" OnClick="btnConverterTest_click"/> 
     <asp:Button Text="Run Import" ID="btnRunImport" runat="server" class="dxpButton_AquaTab" CausesValidation="false" Visible="false" CommandArgument="2" OnClick="btnRunImport_click"/> 
    </div>

这里是JQUERY：

if ($('#dgLinkGrid').is(':visible')) { 
     $('#btnViewLinks').removeClass("dxpButton_AquaTab"); 
     $('#btnViewLinks').addClass("dxpButton_AquaTabSelected"); 
    };

这里是我的CSS：

.dxpButton_AquaTab { 
    background:url("App_Themes/Aqua/Editors/edtButtonBack.gif") repeat-x scroll center top #E2F0FF; 
    border:1px solid #A3C0E8; 
    color:#2C4D79; 
    cursor:pointer; 
    font-family:Tahoma; 
    font-size:9pt; 
    font-weight:normal; 
    padding:1px; 
    vertical-align:middle; 
    width:103px; 
    height:40px; 
    margin-left:3px; 
    margin-bottom:-1px; 
    } 

.dxpButton_AquaTabSelected 
{ 
    background-color:White; 
    border:1px solid #A3C0E8; 
    color:#2C4D79; 
    cursor:pointer; 
    font-family:Tahoma; 
    font-size:9pt; 
    font-weight:normal; 
    padding:1px; 
    vertical-align:middle; 
    width:103px; 
    height:40px; 
    margin-left:3px; 
    margin-bottom:-3px; 
    z-index:100; 
    border-bottom:0px solid white; 
    border-top:3px solid #FFBD69; 
}

来源

2011-04-26 Todd Vance

你可以发布一些代码，或者，甚至更好，链接到你所看到的演示？或使用jsfiddle.net – 2011-04-26 15:18:45

有必要能够看到HTML – jessegavin 2011-04-26 15:48:53

我放在一起有点草率的jsfiddle证明：

确保徘徊的链接，看到它在行动。

http://jsfiddle.net/Madmartigan/xb6mY/

基本上，你position:relative结合您的阴性切缘绝招（获得z-index的工作），并在锚上一些额外的底部填充。将边框应用于包装（列表项）而不是锚点。我以为你想让选项卡保持原位而不会沉下去。

对不起，我的解释不好，但我想也许jsfiddle可以做的更好，现在我可以做得更好，GL！

来源

2011-04-26 15:53:57

谢谢！那jsFiddle的东西真棒！我实际上最终只需要使我的底部边框变成白色并且宽度为2px ...我有种奇怪的情况，我尝试使用某些DevExpress按钮进行此项工作，因为我不想与某人先前的多视图（等等等等等等.net垃圾） – 2011-04-26 17:21:29

如何在包含div的底部边界处放置按钮（白色）的底部边框

回答

相关问题