Question

如何在不改变父元素宽度的情况下制作宽度为100％且填充符合其他元素的元素？

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

Answer 1

默认情况下，

input元素为display: inline。如果您希望display: block正常工作，请将它们设为width: 100%。

Answer 2

在这种情况下，您不能同时使用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>

宽度为100％的元素和填充

2 个答案: