81

わかりました、これを正しくするのは一見不可能です。テキストボックスとセレクトボックスがあります。左マージンと右マージンに整列するように、それらを正確に同じ幅にしたい。

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            input, select {
                width: 200px;
            }
        </style>
    </head>
    <body>
        <input type="text" value="ABC"><br>
        <select>
            <option>123</option>
        </select>
    </body>
</html>

それでいいと思いますよね？いいえ。Firefox では、選択ボックスが 6px 短くなっています。スクリーンショットを参照してください。Firefox のスクリーンショット

では、コードを編集して 2 つのスタイルを作成しましょう。

<style type="text/css">
    input {
        width: 200px;
    }
    select {
        width: 206px;
    }
</style>

わかりました！

Firefox で修正

ちょっと待って、Chrome でテストしたほうがいいよ...

クロムのスクリーンショット

FFFFFFふうううううううううう

すべてのブラウザでこれらを並べる方法を教えてもらえますか? width: 200px だけを実行できないのはなぜですか? すべてのブラウザーで表示が異なるのはなぜですか? また、テキスト ボックスと選択ボックスの高さが異なるのはなぜですか。どうすればそれらを同じ高さにすることができますか? height と line-height を試してみましたが、役に立ちませんでした。

解決：

わかりました、以下の回答からいくつかの助けを借りて解決策を見つけました。重要なのは、box-sizing: border-boxプロパティを使用することです。これにより、境界線とパディングを含む幅を指定するときに使用できます。ここで優れた説明を参照してください。その後、ブラウザはそれを詰め込むことができません。

コードは以下にあり、ボックスの高さを同じサイズに設定し、ボックス内のテキストをインデントして整列させています。また、境界線を設定する必要があります。これは、Chrome が選択ボックスに使用する非常に奇妙に見える境界線を持っているため、配置が失われるからです。これは、HTML5 サイト (IE9、Firefox、Chrome、Safari、Opera などのサポートなど) で機能します。

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            input, select {
                width: 200px;
                border: 1px solid #000;
                padding: 0;
                margin: 0;
                height: 22px;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
            }
            input {
                text-indent: 4px;
            }
        </style>
    </head>
    <body>
        <input type="text" value="ABC"><br>
        <select>
            <option>123</option>
            <option>123456789 123123123123</option>
            <option>123456789 123123123123 134213721381212</option>
        </select>
    </body>
</html>

入力ボタンやチェックボックスなどをこのスタイリングに含めたくない場合がある最後の警告として、 を使用しinput:not([type='button'])て特定のタイプに適用しないようにするか、 を使用input[type='text'], input[type='password']して適用したいタイプを指定します。

4

7 に答える 7

7

これは、<input type="text" />要素のデフォルト スタイルが要素とわずかに異なるためです<select>。たとえば、ボーダー、パディング、およびマージンの値が異なる場合があります。

これらのデフォルト スタイルは、Firefox の Firebug や Chrome のビルトイン インスペクターなどの要素インスペクターで確認できます。さらに、これらのデフォルトのスタイルシートはブラウザごとに異なります。

次の 2 つのオプションがあります。

  1. ボーダー、パディング、およびマージンの値を両方の要素で同じになるように明示的に設定します
  2. 独自の CSS スタイルシートの前に含める CSS リセット スタイルシート

オプション 1. を使用します。オプション 2. には多くの作業が必要であり、大量の不要な CSS が必要になるためです。しかし、一部の Web 開発者は、ゼロから始めて完全に制御することを好みます。

于 2012-04-03T21:13:12.127 に答える
3

デフォルトでは、ブラウザごとに異なるスタイルが適用されます。margin と padding の両方を 0 にリセットすると、Firefox と Chrome の両方で両方の要素の幅が等しくなることがわかりました。

<html>
    <head>
        <title>Test</title>
        <style type="text/css">
            input, select {
                margin: 0;
                padding: 0;
                width: 200px;
            }
        </style>
    </head>
    <body>
        <input type="text" value="ABC"><br />
        <select>
            <option>123</option>
        </select>
    </body>
</html>

個人的には、デザインを複数のブラウザーで見栄えよくする前に、 YUI CSS Resetのような最小限の CSS リセット スタイルシートを使用するのが好きです。

于 2012-04-03T21:12:36.207 に答える
3

これで近づくことはできますが、そのレベルの精度はほぼ不可能です。

<div style="width: 200px"><input type="text" style="width: 100%; margin: 0; padding: 0" /></div>
<div style="width: 200px">
    <select id="Select1" style="width: 100%; margin: 0; padding: 0">
        <option>1</option>
    </select>
</div>
于 2012-04-03T21:08:05.087 に答える
2

問題の select タグと input タグの両方にクラスを追加します。

<input class='custom-input'/>
<select class='custom-input'></select>

次に、デザインに合わせて以下の css を変更します。

.custom-input {
        width:140px;
        border:1px solid #ccc;
        margin:1px;
        padding:3px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -ms-box-sizing:content-box;
        -moz-box-sizing:content-box;
        -webkit-box-sizing:content-box;
        box-sizing:content-box;
    }

obvs これはブラウザをサポートするための修正です

于 2015-03-13T11:35:58.637 に答える
0

テーブル 4 入力を使用する場合、次のソリューションを使用できます - ie7 とも互換性があります。

<tr style="width:1px;"><td style="width:inherit;position:relative;">
    <select style="width:100%;"> 
    </select> 
</td></tr>
<tr><td>
    <input type="text" style="width:150px;"/>
</td></tr>

そうすれば、テーブル セルの幅は入力の幅に固定されます。

そうすれば、選択は常に残りの幅を取り、d 入力と完全に整列します。

于 2012-07-29T07:35:45.960 に答える
0

両方の要素からデフォルトの境界線を削除してみてください:

select, input {
 border:0;
}
于 2013-01-09T10:04:03.390 に答える