CSSでテキストと選択ボックスを同じ幅に揃えますか？
わかりました、これを正しく行うことは一見不可能です。テキストボックスと選択ボックスがあります。左マージンと右マージンに揃うように、正確に同じ幅にしたいです。 <!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短くなっています。スクリーンショットを参照してください。 では、コードを編集して2つのスタイルを作成しましょう。 <style type="text/css"> input { width: 200px; } select { width: 206px; } </style> うまくいきました！ ちょっと待って、Chromeでもっとテストして... 誰かがこれらをすべてのブラウザに並べる方法を教えてもらえますか？幅：すべて200pxを実行できないのはなぜですか、すべてのブラウザで表示が異なるのはなぜですか？また、テキストボックスと選択ボックスの高さが異なるのはなぜですか？どうすれば同じ高さにできますか？高さとラインの高さを試しましたが、役に立ちません。 解決： わかりました、私は以下の答えからいくつかの助けを借りて解決策を見つけました。重要なのは、box-sizing：border-boxプロパティを使用して、境界線とパディングを含む幅を指定することです。ここで優れた説明を参照してください。その後、ブラウザはそれを詰め込むことができません。 コードは以下のとおりです。ボックスの高さも同じサイズに設定し、ボックス内のテキストをインデントして整列させています。また、Chromeには、配置を破棄する選択ボックスに使用する非常に奇妙な外観の境界線があるため、境界線を設定する必要があります。これは、HTML5サイト（IE9、Firefox、Chrome、Safari、Operaなどのサポートなど）で機能します。 <!DOCTYPE html> <html> <head> <style …