div邊框重疊按鈕邊框，如何反轉呢？

我遇到了CSS和邊框問題。我有this example運行良好，但我想要this one以同樣的方式工作，我的意思是「.current」buttom的右邊框（白色）必須與「.simpleTabsContent」邊框重疊，但它不會，它位於div邊界。div邊框重疊按鈕邊框，如何反轉呢？

我試着用z-index，但沒有改變。我嘗試了很多東西，但都沒有成功。

CSS代碼不工作，我想：

div.simpleTabs { width: 90px;float:left;padding: 0; } 
ul.simpleTabsNavigation { margin: 10px -1px 0 0; padding:0; text-align:left;} 
ul.simpleTabsNavigation li { list-style:none; display:inline; padding:0; } 
ul.simpleTabsNavigation li button { 
margin-bottom: 3px;width: 100%; color:#41635e; border:1px solid #6DA69D; 
padding:3px 6px; background:#b6d2ce; font-size:12px; font-weight: bold; 
text-decoration:none; font-family: Verdana; } 
ul.simpleTabsNavigation li button:hover { background-color:#d3e4e1; } 
ul.simpleTabsNavigation li button.current { 
background:#ffffff; color:#6da69d; border-right:1px solid #ffffff;} 
div.simpleTabsContent { border:1px solid #6DA69D; padding:0px 5px 5px 10px; } 
#msg{float:left; width:350px; padding: 5px 10px; margin-top:10px;} 
#container{ margin: 0; width: 500px; position: relative;}

CSS代碼工作，我想：

div.simpleTabs { padding: 5px 0 0 5px; } 
ul.simpleTabsNavigation { margin:0 10px -1px 10px; padding:0; text-align:left; } 
ul.simpleTabsNavigation li { list-style:none; display:inline; margin:0; padding:0; } 
ul.simpleTabsNavigation li button { 
color:#41635e; border:1px solid #6DA69D; padding:3px 6px; background:#b6d2ce; 
font-size:12px; font-weight: bold; text-decoration:none; font-family: Verdana; } 
ul.simpleTabsNavigation li button:hover { background-color:#d3e4e1; } 
ul.simpleTabsNavigation li button.current { 
background:#ffffff; color:#6da69d; border-bottom:1px solid #ffffff; } 
div.simpleTabsContent { border:1px solid #6DA69D; padding:5px 15px } 
#msg{ margin: 0 5px 5px 10px;} 
#container{ margin: 0; float: left; width: 450px; position: relative;}

我希望得到一些幫助。謝謝。

來源

2012-12-05 IsabelPM

在Chrome中查看第一個小提琴時，按鈕和內容之間存在間隙。這是故意的嗎？ –

不，這個差距並不是有意的，但它並不是什麼東西，也不是我所要求的。我想要的是讓按鈕「.current」的邊界與左邊的「.simpleTabsContent」邊框重疊。我使用Firefox並且沒有顯示差距，雖然在所有的瀏覽器中都是一樣的，但我會用div來發布兩張圖片，但這並不是必要的，因爲阿薩德給了我答案。 – IsabelPM

對於那些在Chrome中看到示例的人感到抱歉，我沒有注意到Chrome中的差距。我必須添加一些圖片，對不起，謝謝大家。 – IsabelPM

這可以通過簡單地給出兩個主要元件的適當的z索引值來解決。要div.simpleTabs地址：

position:relative; z-index: 2;

要div.simpleTabsContent地址：

position:relative; z-index: 1;

現在simpleTabs DIV重疊simpleTabsContent格，這意味着你的改變的邊界現在是可見的。這裏是一個演示：http://jsfiddle.net/WEBnc/

來源

2012-12-05 13:26:33

這就是我想要的。這是我所要求的：buttom的右邊界「.current」與另一個div的左邊界重疊。我不知道爲什麼它以前不適合我。謝謝。 – IsabelPM

我想，也許它沒有工作，因爲我以前沒有的「位置：親戚」。 – IsabelPM

div.simpleTabs { position: relative; width: 90px;float:left;padding: 0; z-index: 1; margin-right: -1px;} 

ul.simpleTabsNavigation { margin: 10px 0px 0 0; padding:0; text-align:left;} 

ul.simpleTabsNavigation li { list-style:none; display:inline; padding:0; } 

ul.simpleTabsNavigation li button { 
    margin-bottom: 3px;width: 100%; color:#41635e; border:1px solid #6DA69D; 
    padding:3px 6px; background:#b6d2ce; font-size:12px; font-weight: bold; 
    text-decoration:none; font-family: Verdana; } 

ul.simpleTabsNavigation li button:hover { background-color:#d3e4e1; } 

ul.simpleTabsNavigation li button.current { 
    background:#ffffff; color:#6da69d; border-right: 1px solid #fff;} 

div.simpleTabsContent { border:1px solid #6DA69D; padding:0px 5px 5px 10px; } 

#msg{float:left; width:350px; padding: 5px 10px; margin-top:10px;} 

#container{ margin: 0; width: 500px; position: relative; 
}

來源

2012-12-05 13:16:38 igni

原始鏈路http://jsfiddle.net/LLVtr/具有按鈕和在最新的Chrome消息之間的間隙。通過在版本2中爲消息添加一個頁邊空白將使其看起來相同。

的添加到#msg

margin-left: 2px;

結果：

http://jsfiddle.net/GfENx/3/

來源

2012-12-05 13:18:26 LonWolf

這是不正確的。現在按鈕和消息之間存在差距。 –

你的CSS是不正確的然後。您在Chrome中提供的鏈接也存在差距。我只是讓它看起來像Chrome中的http://jsfiddle.net/LLVtr/ – LonWolf

我沒有給你任何CSS，也沒有給你一個鏈接。 –

div.simpleTabs { width: 90px;float:left;padding-right: 3px; }

代替填充：0;我已經做了填充 - 右：3px;

http://jsfiddle.net/VS7fn/

來源

2012-12-05 13:21:39 I29

div.simpleTabs { width: 90px;float:left;padding-right: 0px; position: absolute;} 

ul.simpleTabsNavigation { margin: 10px -1px 0 0; padding:0; text-align:left;} 

ul.simpleTabsNavigation li { list-style:none; display:inline; padding:0; } 

ul.simpleTabsNavigation li button { 
    margin-bottom: 3px;width: 100%; color:#41635e; border:1px solid #6DA69D; 
    padding:3px 6px; background:#b6d2ce; font-size:12px; font-weight: bold; 
    text-decoration:none; font-family: Verdana; } 

ul.simpleTabsNavigation li button:hover { background-color:#d3e4e1; } 

ul.simpleTabsNavigation li button.current { 
    background:#ffffff; color:#6da69d; border-right:1px solid #ffffff;} 

div.simpleTabsContent { border:1px solid #6DA69D; padding:0px 5px 5px 10px; } 

#msg{float:left; width:350px; padding: 5px 10px; margin-top:10px; margin-left:90px;} 

#container{ margin: 0; width: 500px; position: relative; 
}

它會爲你工作。

來源

2012-12-05 13:33:48

div邊框重疊按鈕邊框，如何反轉呢？

回答

相關問題