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

考虑代码：为什么<input type =“text”>的实际尺寸小于指定尺寸？

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

事实上，文本字段不占据整个父DIV，正如人们所期望的那样。为什么？预先感谢您的答案。

来源

2012-12-09 Andrey Esperanza

答案是字体大小。

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

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

您可以轻松地通过使用 '％' 单位解决这个问题：

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

来源

2012-12-09 06:06:49

谢谢！我对这些不同的字体有过这样的想法。 –

<!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-09 06:04:12 Moiz

尝试使用100％的宽度，而不是一个em宽度：

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

注意，文本字段仍然有填充和边框 - 所以100％的宽度会溢出包含div 。

来源

2012-12-09 06:05:16 leepowers

谢谢。但在这种情况下，出于某种原因，会稍微超出父DIV的范围。 –

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

回答

相关问题