バランスが取れたように見える 2 段の複数列フォームを作成する方法を試しています。私の最新の試みは、各ラベル/入力を で包み込み、liそれらを所定の位置に浮かせることです。試行はある程度成功していますが、解決できない寸法の問題があります。フォームの幅は 600px で、lis を 280px にしました。これにより、2 つの列がフォームのほぼ中央に配置されます。ただし、効果は偏っています。すべてが左に偏りすぎている。フォームの右側に約 150px の巨大な余白があるようですが、それだけではありません。
それを分析すると、inputs が実際には 175px で測定されていることに気付きました。ただし、幅を広げようとすると、新しい行に移動するため、280px のように動作します。liしかし、jsfiddle では、最後が全幅 (600px) に拡張されていることに気付くでしょう。fieldsetしたがって、フォーマットの結果である可能性はありません。さらに、floatを「右」に変更しても、150px の偽の余白がまだ残っています。Firebug はすべてのマージンとパディングを通常どおり検出します。
私はそれを理解していません。名前の変更、追加のクラスの適用、li の順序の変更、属性の削除と他の属性の追加、およびスタイリング プロトコルの変更を試みましたが、通常は状況を悪化させるだけです。ol li私の他のテクニックのいずれかが私が探しているディスプレイを提供することに近づいた場合、私はコンセプトを完全にあきらめます. 150px の右マージンの原因は何ですか? どうすればそれを取り除くことができますか？フォームの 2 番目の部分には 2 列と 3 列があるはずなので、これを理解する必要があります。したがって、lis が一貫した幅を提供できない場合は、別の方法を試す必要があります。
リンクは次のとおりです: jsfiddle [http://jsfiddle.net/9344a/] よろしくお願いします。(きれいにしようとしましたが、さまざまな組み合わせを試した結果、CSS/HTML が少し乱雑になる可能性があります。まだわかりにくいことがあれば教えてください。)