如何在包含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的底部邊界處放置按鈕（白色）的底部邊框

回答

相關問題