コードを考えてみましょう:
<div style="width: 10em; float: left; padding: 0; margin: 0">
<input type="text" style="width: 10em"/>
</div>
実際、予想されるように、テキスト フィールドは親 DIV 全体を占めるわけではありません。なんで?ご回答ありがとうございます。
答えはフォントサイズです。
em は、「現在のフォント サイズに対するサイズ」の測定値です。
入力要素のデフォルトの font-size は div よりも小さいため (ブラウザのデフォルトにより)、10em は異なる幅に相当します。
これは、「%」単位を使用して簡単に修正できます。
<input type="text" style="width:100%"/>
幅の代わりに 100% 幅を使用してみてくださいem
。
<div style="width: 10em; float: left; padding: 0; margin: 0">
<input type="text" style="width: 100%"/>
</div>
テキスト フィールドにはまだパディングと境界線があることに注意してください。そのため、100% の幅は含まれる div をオーバーフローします。
<!DOCTYPE html>
<html>
<head>
<title> problem </title>
</head>
<body>
<div style="width: 10em; float: left; padding: 0; margin: 0;background-color:red;">
<input type="text" style="width: 100%; padding:0; margin:0"/>
</div>
</body>
</html>