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

Question

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

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

但是，当我添加 margin-bottom:-2px;到班级 - 希望覆盖我的 DIV 边框的一部分 - 它仍然显示 div 边框。

如果我将其设为 -3​​px，那么我会在 div 上获得白色背景...但是现在我在底部下方粘贴了 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！