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

Question

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

在每个div中，我想插入纯文本，然后是输入字段，填充其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>

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

这就是我所期待的：

Answer 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!

Answer 2

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

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

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

Answer 3

在您的标记中，将输入包装在 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;

}

Finel fiddle here