首页 文章

是否可以设置文本输入的样式以填充其父级的宽度？

提问于
浏览 次
17

多年来我一直有这个问题，之前我曾见过类似的问题，但是没有一个问题解决了在元素上设置 width: 100% 的问题 - 填充，边距和边框会增加宽度 .

看看这个Fiddle .

白色最顶部的文本框是标准文本框，其宽度设置为 100% . 正如您所看到的那样，由于边距，填充和边框设置，它会溢出它的父级 .

绿色文本框的样式类似于使用 position: absolute 的div . 这在webkit浏览器中就像一个梦想，但在其他任何地方都没有 .

红色div是控件 - 我希望输入操作 just like that .

我可以使用任何黑客/技巧让我的文本输入就像所有现代浏览器中的红色div一样，换句话说，是否适合父级的填充？请编辑我的小提琴或创建自己的答案 . 谢谢！

css width textinput

3 回答

  • 0

    尝试使用 display:table-cell 属性

    display:table;
  display:table-cell;

    可以帮到你吗

    请检查此链接

    Style input element to fill remaining width of its container

    回复于
  • 2

    使用 calc 来补偿边距和 box-sizing 用于填充

    input#classic
{
    padding: 5px;
    margin: 5px;
    width: -webkit-calc(100% - 10px);
    width: -moz-calc(100% - 10px);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

    FIDDLE

    回复于
  • 26

    您可以：

    input#classic
{
    width: 100%;
    padding: 5px;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;        
}

    JS Fiddle demo .

    注意我删除了 margin ，因为它导致溢出，并设置 box-sizing 以确定元素的宽度，包括边框和填充的宽度 .

    回复于

相关问题