我有一个网页,设置了一定的限制,以便根据屏幕宽度进行响应式查看。不过,我遇到了一个问题,我的表单输入设置了宽度 width:100%
和 padding-left:20px
。由于填充,结果显示输入字段宽度超出网页正文宽度 20 像素。
输入代码:
.field {
outline:0;
width:100%;
height:50px;
padding-left:10px;
float:left;
border: 1px solid #d3d4d5;
border-right-color: #c2c7ca;
border-left-color:#c2c7ca;
color:#3a444f;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 5px;
position: relative;
z-index: 0;
-webkit-background-clip: padding-box;
font-size:16px;
}
如何在输入字段末尾获得额外的空间以限制正确的宽度?
最佳答案
您不需要添加任何额外的空间。您可以简单地使用:
input {
box-sizing: border-box;
width: 100%;
}
使用border-box
选项,宽度设置包括填充和边框。
关于html - 响应式表单输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24719712/