2

コードを考えてみましょう:

<div style="width: 10em; float: left; padding: 0; margin: 0">
  <input type="text" style="width: 10em"/>
</div>

実際、予想されるように、テキスト フィールドは親 DIV 全体を占めるわけではありません。なんで？ご回答ありがとうございます。

4

3 に答える 3

3

答えはフォントサイズです。

em は、「現在のフォント サイズに対するサイズ」の測定値です。

入力要素のデフォルトの font-size は div よりも小さいため (ブラウザのデフォルトにより)、10em は異なる幅に相当します。

これは、「%」単位を使用して簡単に修正できます。

<input type="text" style="width:100%"/>
于 2012-12-09T06:06:49.993 に答える
1

幅の代わりに 100% 幅を使用してみてくださいem。

<div style="width: 10em; float: left; padding: 0; margin: 0">
  <input type="text" style="width: 100%"/>
</div>

テキスト フィールドにはまだパディングと境界線があることに注意してください。そのため、100% の幅は含まれる div をオーバーフローします。

于 2012-12-09T06:05:16.117 に答える
0 
<!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>
于 2012-12-09T06:04:12.687 に答える