浮动 div 内输入元素的填充宽度答案

【问题标题】：Filler width of an input element inside a floating div浮动 div 内输入元素的填充宽度
【发布时间】：2013-03-22 09:19:34
【问题描述】：

我正在尝试使用 float 在容器中组织宽度为 40% - 30% - 30% 的 div 的水平布局。

我想在每个 div 中插入 纯文本，后跟一个 input 字段，该字段填充其 div 的水平其余部分。

作为问题的简化再现，只需在 CSS 上添加：

.r {background-color: pink;}
.g {background-color: lightgreen;}
.b {background-color: lightblue;}
.w40 {width: 40%;}
.w30 {width: 30%;}
.w100 {width: 100%;}
.fl {float: left;}
.fr {float: right;}
.cb {clear: both;}

这在 HTML 上：

<div class="r w40 fl">
    <div class="g fl">Aaaaaa:</div>
    <input class="b" value="Bbbbbb" />
</div>
<div class="r w30 fl">
    <div class="g fl">Cccccc:</div>
    <div class="b">Dddddd</div>
</div>
<div class="r w30 fl">
    <div class="g fl">Eeeeee:</div>
    <div class="b">Ffffff</div>
</div>

如何让Bbbbbbb占据其div右侧的所有空间，就像Dddddd和Ffffff一样？

这是我所期待的：

【问题讨论】：

我不明白你在找什么。你能制作一个你所期待的简单图像吗？
旁白：去样式化的无序列表是比 DIV 更好的容器。 LABEL 标记比 DIV 更适合您的文本指示符。
jsFiddle:jsfiddle.net/jdwire/8S6NT
@ignacioricci This is what I'm expecting.
你的代码已经做到了，我知道。但是 aaa、ccc、eee 会是多行的较长文本，对吧？如果你漂浮的东西没有宽度，你就不能“填满”空间。

标签： css html css-float width

【解决方案1】：

From this answer: 我只是将输入包装在一个样式为overflow: hidden 的 div 中。

CSS：

.r {background-color: pink;}
.g {background-color: lightgreen;}
.b {background-color: lightblue;}
.w40 {width: 40%;}
.w30 {width: 30%;}
.w100 {width: 100%;}
.fl {float: left;}
.filler {overflow: hidden; padding-right: 4px;}

HTML：

<div class="r w40 fl">
    <div class="g fl">Aaaaaa:</div>
    <div class="filler"><input class="b w100" value="Bbbbbb" /></div>
</div>
<div class="r w30 fl">
    <div class="g fl">Cccccc:</div>
    <div class="b">Dddddd</div>
</div>
<div class="r w30 fl">
    <div class="g fl">Eeeeee:</div>
    <div class="b">Ffffff</div>
</div>

This is it. The perfect result!

【讨论】：

【解决方案2】：

如果没有为输入声明 size 属性，则它的默认大小为 20，但即使该大小在不同的浏览器中呈现不同。

一种解决方案是使用 JQuery 计算您为输入留下的空间，然后动态添加 CSS 以修改输入的宽度。

缺点是输入将首先以默认宽度呈现，然后调整大小，可能导致布局“跳舞”。为此，您可以使用 display: none 隐藏输入并仅在调整大小后显示。

【讨论】：

【解决方案3】：

在您的标记中，将 input 包装在 div 中

<div class="r w40 fl">
    <div class="g fl">Aaaaaa:</div>
    <div id="inp"><input class="b" value="Bbbbbb" /></div>
</div>

使用此规则为您的输入设置块显示。 100% 的宽度将完成剩下的工作

input {
    display:block;
    width:100%;
}

你仍然必须检查一些关于你的第一个粉红色 div 的高度的化妆品（由输入推动）查看 fsFiddle here

修正了高度差

使用以下规则修改边框和高度属性。

input {
    display:block;
    width :100%; 
    border:none;
    height:18px;

}

小提琴here

【讨论】：

这几乎解决了！问题是，如果仔细观察，Bbbbbbb 的字段现在通过 Cccccc:。我仍然必须以某种方式从中减去 Aaaaaa: 的宽度。
我不确定你现在在说什么。无论如何，我为自己修复了身高差的化妆品，你可以在这个小提琴中看到它。jsfiddle.net/Fico/XNWQu