Question

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

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

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

感谢。

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

HTML code：

<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
{
}

P.S。我试图用纯粹的CSS做到这一点。

Answer 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％，因此它会填充除左右填充之外的空间。

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

注意
input元素有一个边框，其宽度可能因浏览器而异，因此，您可能会看到浏览器之间略有不同。如果你拍摄一个屏幕截图并计算像素，你可能会发现中心并不完美，但为了简化编码，它的效果非常好。

使输入字段元素流畅并占用剩余的可用空间，在一行上有两个固定大小的元素

1 个答案: