元素宽度100％和填充

Question

如何使宽度为100％的元素和填充符合其他元素而不改变父元素的宽度？

var inp = $('<input type="text" style="padding:4px; width:100%" />') 
     .appendTo('<div style="width:200px"></div>'); 

Answer 1

在这种情况下，您不能一起使用width: 100%和padding: 4px。元素将始终是8px宽于其父项。您必须使用您的输入元素的像素值。你的情况是width: 192px。

盒子模型总是（除了一些较旧的IE版本）将填充（和边框）添加到元素宽度。因此，如果宽度为100％水平填充的每个像素都会使元素比其父元素宽。

您可以通过填充100％的宽度来伪造输入样式。

<div style="width:200px"> 
    <div style="border: 1px solid blue; background: #fff"> 
     <div style="padding:2px 4px"> 
      <input type="text" style="display:block; width:100%; border:0; padding:0" /> 
     </div> 
    </div> 
</div> 

Answer 2

input元件默认为display: inline。如果你想让width: 100%工作，请将它们设为display: block。