0

1 列ボタンと 2 列ボタンの両方を含むインターフェイスを作成しようとしています。ここでフィドルを見ることができます： http://jsfiddle.net/SZwQC/

フィドルでわかるように、要素の実際の幅 (余白を含む) は 130px です。ただし、2 列の要素間のマージンをカバーできるようにするには、+2 ピクセルを追加する必要がありました。

.single{
    width: 130px;
}

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

結果は希望どおりですが、+2 ピクセル幅が広くなっています。追加のピクセルがなければ、2 つの列の項目を行う方法を見つけることができませんでした (2 つの項目の間に余白を追加するだけです)。

これはおそらく解決するのに達人を必要としないことは知っていますが、完璧な解決策を見つけることができませんでした.

どんな助けでも大歓迎です。

ありがとう！

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、最初に を使用し、CSS で を使用するdivスタイルを使用することもできます。その後、スタイリングを使用して、両方を同じクラス ( ) に保つことができます。このHTML コードを複数回繰り返さない場合は、これが実際に最適なオプションです。idmargin-right:2px;divdoublewidth:64px;

于 2013-02-03T00:23:32.057 に答える