web-dev-qa-db-ja.com

入力と選択フィールドの幅を等しくする方法

フォームには、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">

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

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

htmlcsshtml-selectborder-box
105
luk4443

更新された回答

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

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

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

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

note：On IEバージョン8以降..

オリジナル

bordersをリセットすると、select要素はinput要素よりも常に2ピクセル小さくなります。

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

130
Gabriele Petrioli

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

input, select {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
113
tomsv

このコードをcssに追加します。

 select, input[type="text"]{
      width:100%;
      box-sizing:border-box;
    }
4
151291