首页   技术笔记   网址导航   Json在线解析   二维码   Ip地址查询   在线流程图  
新用户注册 | 会员登录
当前位置:  开发笔记 > 前端 > 正文

CSS:填充父容器的文本框

作者：LEEstarmmmmm | 2023-09-05 18:30
如何解决《CSS:填充父容器的文本框》经验，为你挑选了2个好方法。

我试图让一个(以下简称为"文本框")通过设置其填充父容器width来100%.这有效,直到我给文本框填充.然后将其添加到内容宽度并且输入字段溢出.请注意,在Firefox中,这仅在将内容呈现为符合标准时才会发生.在怪癖模式下,另一个盒子模型似乎适用.

这是在所有现代浏览器中重现行为的最小代码.

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

#y, input {
  background: red;
  padding: 0 20px;
  width: 100%;
}

  
x

我的问题:如何让文本框适合容器？

注意:对于

,这很简单:只需设置即可width: auto.但是,如果我尝试为文本框执行此操作,效果会有所不同,文本框将其默认行计数作为宽度(即使我display: block为文本框设置).

/编辑:大卫的"解决方案"当然会奏效.但是,我不想修改HTML - 我特别不想添加没有语义功能的虚拟元素.这是一个典型的divitis病例,我想不惜一切代价避免.这只能是最后的黑客攻击.



1> David Kolar..：

你可以用a包围文本框

并给它
padding: 0 20px.您的问题是100%宽度不包括任何填充或边距值; 这些值被添加到100%宽度的顶部,因此溢出.



2> studioromeo..：

使用CSS3,您可以在输入上使用box-sizing属性来标准化他们的盒子模型.这样的东西可以让你添加填充,并有100%的宽度:

input[type="text"] {
    -webkit-box-sizing: border-box; // Safari/Chrome, other WebKit
    -moz-box-sizing: border-box;    // Firefox, other Gecko
    box-sizing: border-box;         // Opera/IE 8+
}

不幸的是,这对IE6/7不起作用,但其余的都很好(兼容性列表),所以如果你需要支持这些浏览器,最好的选择是Davids解决方案.

如果您想阅读更多内容,请查看Chris Coyier撰写的精彩文章.

希望这可以帮助!

推荐阅读
devbox
LEEstarmmmmm
这个屌丝很懒，什么也没留下！
关注作者
Tags | 热门标签
RankList | 热门文章
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有