CSS和输入100％宽度[重复]答案

【问题标题】：CSS and input 100% width [duplicate]CSS和输入100％宽度[重复]
【发布时间】：2014-10-22 16:54:47
【问题描述】：

我有各种输入，我希望设置其父级的 100% 宽度——恰好是一个具有 16 像素边框的 DIV。

当我将输入的边框设置为零并将其宽度设置为 100% 时——一切都很好。第二个我在输入中添加填充或边距——该死的控件覆盖在边框上。

如果我将输入包装在 DIV 中并在选择控件时（在 Chrome 中）以这种方式提供填充/边距，则 INPUT 将获得一个焦点矩形并且看起来很荒谬......

在 CSS 中实现这一点的方法是什么？

亚历克斯

【问题讨论】：

标签： html css

【解决方案1】：

input {
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
}

【讨论】：