Question

考虑一下代码：

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

实际上，文本字段并不像人们所期望的那样占据整个父DIV。为什么？提前感谢您的回答。

Answer 1

答案是字体大小。

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

由于输入元素的默认字体大小小于div（由于浏览器默认值），因此10em等于不同的宽度。

您可以使用'％'单位轻松解决此问题：

<input type="text" style="width:100%"/>

Answer 2

尝试使用100％宽度而不是em宽度：

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

请注意，文本字段仍将具有填充和边框 - 因此宽度为100％将溢出包含的div。

Answer 3

<!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>

为什么<input type =“text”/>的实际大小小于指定的大小？

3 个答案: