117

フォームには、1 つの選択フィールドと 2 つの入力フィールドがあります。これらの要素は垂直方向に配置されます。残念ながら、これらの要素の幅を等しくすることはできません。

これが私のコードです：

<select name="name1" style="width:198px">
  <option>value1</option>
  <option>value2</option>
</select><br/>
<input type="text" name="id1" style="width:193px"><br/>
<input type="text" name="id2" style="width:193px">

上記の例では、select 要素の最適な幅は 198 ピクセルまたは 199 ピクセルです (もちろん、193 ピクセルを試しましたが、違いは大きいです)。これらの要素の幅は同じではないため、さまざまなコンピューターやブラウザーの解像度に依存すると思います（違いは約1または2ピクセルだと思う場合があります）。これらの要素を div または table の行に設定しようとしましたが、役に立ちません。

Q: これらの要素の幅を正確に等しくするにはどうすればよいですか?

4

5 に答える 5

141

更新された回答

以下は、input/textarea/select 要素で使用されるボックス モデルを変更して、それらがすべて同じように動作するようにする方法です。box-sizing各ブラウザのプレフィックスで実装されているプロパティを使用する必要があります

-ms-box-sizing:content-box;
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box; 
box-sizing:content-box;

これは、前述の 2 ピクセルの違いが存在しないことを意味します。

http://www.jsfiddle.net/gaby/WaxTS/5/の例

注: IE では、バージョン 8 以降で動作します。

オリジナル

境界線をリセットすると、select要素は常に要素よりも 2 ピクセル少なくなりinputます。

例: http://www.jsfiddle.net/gaby/WaxTS/2/

于 2010-11-01T23:09:43.693 に答える
126

上記のGabyの回答（+1）を試しましたが、問題は部分的にしか解決しませんでした。代わりに、content-box が border-box に変更された次の CSS を使用しました。

input, select {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
于 2011-05-05T09:26:53.117 に答える
-2

別のクラスを作成し、with size with 2px の例を増やします

.enquiry_fld_normal{
width:278px !important; 
}

.enquiry_fld_normal_select{
width:280px !important; 
 }
于 2016-01-07T11:03:48.220 に答える