1

如何使输入字段流动并占用中间的剩余空间？

我有两个固定大小的元素，一个在左边，一个在右边。

我希望剩余空间被输入字段占用，并且响应/流畅，因此输入字段将具有可变宽度。

谢谢。

jsfiddle：http: //jsfiddle.net/FXeyr/1/

HTML 代码：

<div class="wrapper">
<div class="yellow">
    left
</div>
<div class="blue">
    right
</div>
<input class="green">
</input>
</div>

CSS： 

.yellow
{
 width: 50px;
 float: left;
 background-color: yellow;
}

.blue
{
  width: 50px;
  float: right;
  background-color: blue;
}

.green
{
}

ps我正在尝试使用纯CSS来做到这一点。

4

1 回答 1

1

你可以尝试这样的事情：

.yellow {
    position: absolute;
    left: 0;
    width: 50px;
    background-color: yellow;
}
.blue {
    position: absolute;
    right: 0;
    width: 50px;
    background-color: blue;
}
.green {
    width: 100%;
}
.wrapper {
    outline: 1px dotted red;
    position: relative;
    padding: 0 50px;
}

小提琴：http: //jsfiddle.net/audetwebdesign/ADdDE/

您需要一个.wrapper包含块，在其中设置左右填充以容纳两个定位（黄色/蓝色）元素。

元素（绿色）的input宽度为 100%，因此它填充了除了左右填充之外的空间。

然后，您使用绝对定位来放置另外两个元素。由于您指定了它们的宽度，因此您知道要使用多少填充。

注意
输入元素有一个边框，其宽度可能因浏览器而异，因此，您可能会看到浏览器之间的细微差别。如果您截屏并计算像素，您可能会发现居中并不完美，但为了编码的简单性，它工作得很好。

于 2013-05-10T21:51:06.190 回答