單雙柱動態接口

Question

我試圖創建一個包含單列和雙列按鈕的界面。你可以在這裏看到小提琴： http://jsfiddle.net/SZwQC/

正如你可以在小提琴中看到的，元素的實際寬度（帶邊距）是130px;不過，我必須提供+2個附加像素才能覆蓋雙列元素之間的邊距。

.single{ 
    width: 130px; 
} 

.double{ 
    width: 64px; 
    margin-right: 2px; 
} 

結果就像我想要的那樣，然而它的寬度是+2像素。沒有額外的像素，我無法找到一種方法來做2列項目（通過只添加兩者之間的餘量）。

我知道這可能不需要大師來解決，但我無法找到一個完美的解決方案。

任何幫助將不勝感激。

謝謝！

Answer 1

只有margin-right添加到第一列：

<div class="double" style="margin-right:2px;">item</div> 
<div class="double">item</div> 

CSS：

.double{ 
    width: 64px; 
} 

編輯：下面介紹如何通過添加在你的CSS文件中的樣式，而不是很難做到這一點使用標籤編碼：

<div class="double1">item</div> 
<div class="double2">item</div> 

CSS：

.double1{ 
    width: 64px; 
    margin-right: 2px; 
} 
.double2{ 
    width: 64px; 
} 

這個工作，或者你可以在第一div使用id，和風格，id在你的CSS有margin-right:2px;。然後，您可以保留div同一類別（double）與width:64px;樣式。這真的是最好的選擇如果你不會多次重複這個HTML代碼。