html – CSS将输入文本包含到100％的宽度

概述所以当我设置输入像这个例子的文本框,因为它有一个边框和填充默认情况下,将比200px更宽. <div style="width:200px; background-color:red;"> <input type="text" name="fname" style="width:100%;"/></div> 我知道我可以通过将类设置为输入标记并使用此CSS进行标记来强制将文本框放在200 所以当我设置输入像这个例子的文本框,因为它有一个边框和填充默认情况下,将比200px更宽.

<div >    <input type="text" name="fname" /></div>

我知道我可以通过将类设置为输入标记并使用此CSS进行标记来强制将文本框放在200px内

-webkit-Box-sizing: border-Box;-moz-Box-sizing: border-Box;    Box-sizing: border-Box;

有没有更好的方式让这个texBox的大小正确,即填充100％,因为我想要它做？我不能使用固定尺寸.我使用CSS主题,因此在编译时不知道文本框填充,边距等.用户可以随时更改它们.所以解决方案必须工作,无论文本框的填充,边框和边距是多少.

解决方法 我想你已经回答了你自己的问题. Box-sizing：border-Box;是真正的唯一的CSS方法来使元素适合其父级. css-tricks在这里有很多细节.

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

我不知道可以使用的任何其他CSS,而不是使用JavaScript来执行一些计算,然后修改输入元素.

总结

以上是内存溢出为你收集整理的html – CSS将输入文本包含到100％的宽度全部内容，希望文章能够帮你解决html – CSS将输入文本包含到100％的宽度所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。