元素寬度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。