我正在尝试为文本字段分配填充,但右侧覆盖了主要内容。我该如何解决?
<div class='contenedor_section'>
<input type='text' placeholder='name' class='estilo_input_text'>
</div>
.contenedor_section{
padding: 20px;
background:red;
}
.estilo_input_text {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
font-style: italic;
color: #999999 !important;
}
最佳答案
否定您应用的填充。或者使用边框框。 calc 函数非常方便,并得到广泛支持,使用它吧!
.contenedor_section{
padding: 20px;
background:red;
}
.estilo_input_text {
display: block;
width: calc(100% - 24px);/* you have to negate the padding of 12px on each side */
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
font-style: italic;
color: #999999 !important;
}
<div class='contenedor_section'>
<input type='text' placeholder='name' class='estilo_input_text'>
</div>
关于html - 填充溢出文本字段中的容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43577270/