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

Posted 2023-03-06

【中文标题】CSS和输入100％宽度[重复]

【英文标题】：CSS and input 100% width [duplicate]

【发布时间】：2014-10-22 16:54:47

【问题描述】：

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

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

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

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

亚历克斯

【参考方案1】：

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

DEMO

READ MORE