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

Posted 2023-03-07

【中文标题】如何将按钮的底部边框（白色）放在包含 div 的底部边框上

【英文标题】：How to lay bottom border of button (white) over bottom border of containing div

【发布时间】：2011-08-13 03:16:07

【问题描述】：

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

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

但是，当我添加 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;

【问题讨论】：

您可以发布一些代码，或者更好的是，链接到您所看到的演示吗？或使用 jsfiddle.net

必须能够看到 HTML

【参考方案1】：

我整理了一个有点草率的 jsFiddle 来演示：

确保将链接悬停以查看它的实际效果。

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

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

很抱歉解释不佳，但我认为 jsfiddle 可能比我目前的解释做得更好，GL！

【讨论】：

非常感谢！ jsFiddle 的东西太棒了！！！实际上我最终只需要将我的底部边框设置为白色和 2px 宽......我有一种非常奇怪的情况，我正在尝试使用一些 DevExpress 按钮来完成这项工作，因为我不想与某人以前的多视图（等等等等等等...... .net废话）