单列和双列动态接口

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;
}

这样可行，或者您可以在第一个id上使用div，并将CSS中id的样式设为margin-right:2px;。然后，您可以将div与double样式保持在同一个类（width:64px;）。这真的是最好的选择如果你不会多次重复这个HTML代码。