2

考虑一个代码：

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

事实上，文本字段并没有像预期的那样占据整个父 DIV。为什么？提前感谢您的回答。

4

3 回答 3

3

答案是字体大小。

em 是“相对于当前字体大小的大小”的度量。

由于输入元素的默认字体大小小于 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 回答