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

Question

我正试图用按钮制作标签。因此，所选按钮的“类”已更改，因此底部边框现在为白色。

效果是让它看起来像连接页面的一部分。

然而，当我添加margin-bottom：-2px;上课 - 希望涵盖我的DIV BORDER部分 - 它仍然显示div边界。

如果我将它设为-3px，那么我在div上得到WHITE背景...但是现在我有1个像素的左右边框粘在底部...溢出：隐藏不起作用，因为它让我回归到DIV边界显示...

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

谢谢！ 托德

这里是-2px - 注意，蓝色边框仍然显示：

这就是如果给它-3px会发生什么......现在蓝色边框贴了（呃！）

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

Answer 1

我把一个有点草率的jsFiddle放在一起来证明：

请务必将链接悬停在其中以查看其效果。

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

基本上，您将负边距技巧与position:relative（以使z-index工作）和锚点上的一些额外底部填充结合起来。将边框应用于包装器（列表项）而不是锚点。我以为你希望标签留在原地而不是下沉。

对于糟糕的解释感到抱歉，但我想也许jsfiddle可以比现在更好地解释，GL！