输入文本宽度以填充剩余空间答案

【问题标题】：Input text width to fill the remaining space输入文本宽度以填充剩余空间
【发布时间】：2013-11-04 23:46:27
【问题描述】：

我看到有类似的主题，但他们提供的解决方案对我不起作用，因为我在文本框和要填充的 div 之间有另一个 div。

我希望“Descrizione”输入文本填充其右侧的所有空间：我已尝试将宽度设置为 100%

 <input style="width:100%" class="boxout" value="...." readonly="true" />

它填充了它的父 div.label_e_campo，但不是我想要填充的主 div (div.dettaglio_ente boxfun)

据我所知，我什至无法让第二个（与“Descrizione”字段相关的那个） div.label_e_campo 的宽度填充行中的剩余空间，而无需设置应有的宽度自动填充父级，但在我的情况下没有。

谢谢

【问题讨论】：

一些随机提示：始终输入元素类型（在您的情况下为“文本”）； CSS 有一个未闭合的括号； headers 应该与 body 分开，特别是如果你使用 float；还可以查看 CSS 重置和 box-sizing: border-box; 以获得成功的生活
CSS 上的括号是在清理代码以将其放入 jsfiddle 时犯的错误！ “标题应该与正文分开”是什么意思？
由于您的标题（按钮等）与正文（标签和文本字段）无关，因此您应该将它们分成两个包含的 div，以便能够更好和独特地格式化它们，特别是如果您是浮动元素。这不是强制性的，只是一个提示
好的，谢谢你的提示。我正在尝试使用更易于维护的布局重新制作具有绝对 (!!!) 位置的遗留表单，在这种情况下我不能过多地移动按钮

标签： html css

【解决方案1】：

我在这里更新了你的小提琴：

Descrizione 不会填充父级，因为您在父级上有一个浮点数。我添加了一个更高级别的包装，上面有花车。

#wrap1 {
float:left;
width:20%;
}
#wrap2 {
float:left;
width:78%;
margin-left:2%;
}

然后添加了这个

div.label_e_campo input {
width:100%;
}

这对你有用吗？

【讨论】：

它有效。我宁愿将标签放在输入旁边而不是上面的命中...我通过将 float:left 放在标签上并将输入宽度设置为 70% 而不是 100% 来获得这种行为。我的解决方案似乎不太干净，我希望它适用于所有常见的浏览器。