css - 如何将按钮(白色)的底部边框放在包含 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 起作用)和 anchor 上的一些额外底部填充结合起来。将边框应用于包装器(列表项)而不是 anchor 。我假设您希望标签留在原位而不是下沉。

抱歉，我的解释很糟糕，但我认为 jsfiddle 的解释可能比我现在能做的更好，GL!