0

I'm trying to create an interface that includes both single and double column buttons. You can see the fiddle here: http://jsfiddle.net/SZwQC/

As you can see in the fiddle, the actual width of the elements (with margins) is 130px; however, I had to give +2 additional pixels to be able to cover up the margins between double-column elements.

.single{
    width: 130px;
}

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

The result is just like how I want it to be, however, it is +2 pixels wider. Without the additional pixels, I could not find a way to do the 2 column items (by only adding the margin between the two).

I know this probably does not need a guru to solve, but I just could not find a perfect solution.

Any help will be appreciated.

Thanks!

4

1 回答 1

0

只添加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，并id在您的 CSS 中使用margin-right:2px;. 然后，您可以通过样式将两者保持div在同一个类 ( double) 中。如果您不打算多次重复此 HTML 代码，width:64px;这确实是最佳选择。

于 2013-02-03T00:23:32.057 回答