CSS:填充父容器的文本框

前端之家收集整理的这篇文章主要介绍了CSS:填充父容器的文本框前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想让一个< input type =“text”> (以下称为“文本框”)通过将其宽度设置为100%来填充父容器。这工作,直到我给文本框一个填充。然后将其添加内容宽度和输入字段溢出。请注意,在Firefox中,这只会在将内容呈现为符合标准时发生。在怪异模式,另一个盒子模型似乎适用。

这里是一个最小的代码,以重现在所有现代浏览器的行为。

#x {
  background: salmon;
  padding: 1em;
}

#y,input {
  background: red;
  padding: 0 20px;
  width: 100%;
}
<div id="x">
  <div id="y">x</div>
  <input type="text"/>
</div>

我的问题:如何获取文本框适合容器?

注意:对于< div id =“y”>,这很直接:简单地设置width:auto。但是,如果我尝试这样做的文本框,效果是不同的,文本框的默认行计数为宽度(即使我设置display:block的文本框)。

/编辑:大卫的“解决方案”当然会工作。但是,我不想修改HTML – 我特别不想添加没有语义功能的虚拟元素。这是一个典型的divitis的情况,我想不惜一切代价。这只能是最后的手段。

解决方法

您可以使用< div>并赋予< div> padding:0 20px。您的问题是,100%宽度不包括任何填充或边距值;这些值被添加在100%宽度的顶部,因此溢出。
原文链接:https://www.f2er.com/css/221278.html

猜你在找的CSS相关文章