CSS 将输入文本包含为 100% 宽度

Question

因此，当我像本示例一样设置输入时，文本框（因为默认情况下有边框和填充）将比 200px 宽。

<div style="width:200px; background-color:red;">
    <input type="text" name="fname" style="width:100%;"/>
</div>

我知道我可以通过为输入标记设置一个类并使用此 CSS 标记它来强制文本框适应 200px

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;    
box-sizing: border-box;

有没有更好的方法来使此文本框正确调整大小，即按照我的需要填充 100%做什么？我不能使用固定尺寸。我使用 CSS 主题，因此文本框填充、边距等在编译时未知。用户可以即时更改它们。因此，无论文本框的内边距、边框和边距如何，该解决方案都必须有效。

Answer 1

我想你已经回答了你自己的问题。 box-sizing: border-box; 实际上是让元素适合其父元素的唯一 CSS 方法。 css-tricks 在这里对此进行了详细介绍。

http://css-tricks.com/box-sizing/

我不知道有任何其他除了使用 javascript 之外，您还可以使用 CSS 来执行一些计算，然后修改您的输入元素。

Answer 2

是的。你可以做到。

您可以在不使用 box-sizing 和 不清楚 解决方案（例如 width~=99%）的情况下完成此操作。
jsFiddle 演示：

HTML 标记：

<div class="input_wrap">
    <input type="text" />
</div>

CSS：

div {
    padding: 6px 17px; /* equal to negative input's margin for mimic normal `div` box-sizing */
}

input {
    width: 100%; /* force to expand to container's width */ 
    border: 7px solid #DFDFDF;  
    padding: 0 10px;
    margin: 0 -17px; /* negative margin = border-width + horizontal padding */ 
}   

Answer 3

<div style="width:200px; background-color:red;">
    <input type="text" name="fname" style="width:100%;border:1px;padding:4px;margin:-5px"/>
</div>

Answer 4

<div style="width:200px; height:22px; background-color:red;">
    <input type="text" name="fname" style="width:97%;margin-left:1%;"/>
</div>

？

但说真的，这里有一个 jsfiddle。