Question

我正在与Zurb的基金会合作创建一个响应式网站，但是当我尝试使我的搜索表单响应时，我遇到了一个问题。

我有一个输入字段，然后在其右边有一个<button>来提交表单。按钮内有一个图像，宽度为70px。所以我需要做的是让输入字段占用剩余的100％。

我试过没有太多运气的overflow: hidden;方法。我甚至尝试过使用百分比，但是当你进入移动尺寸时，由于调整大小（基础的一部分），按钮图像非常小。

这就是我所拥有的：

HTML：

<div class="form-search">
    <input id="search" type="text" class="input-text" />
    <button type="submit" class="button expand postfix">
        <img src="images/search-submit.png" />
    </button>
</div>

CSS：

div.form-search { overflow: hidden; }
div.form-search input { float:left; overflow: hidden; background: #ebebe7; border: none; padding: 1em; outline: none; }
div.form-search button { display: block; background: none; border: none; padding: 0; margin: 0; }

Answer 1

使用以下方法修正了它：

HTML：

<div class="form-search">
    <button type="submit" class="button expand postfix">
        <img src="images/search-submit.png" />
    </button>
    <div>
        <input id="search" type="text" name="search" class="input-text" />
    </div>
</div>

CSS：

div.form-search div { overflow: hidden; }
div.form-search div input { width: 100%; background: #ebebe7; border: none; padding:  1em;  outline: none; }
div.form-search button { float: right; width: emCalc(70); background: none; border: none; padding: 0; margin: 0; }

这会将提交按钮浮动到div的右边，因为它的设置宽度和溢出：隐藏;在输入的父div上，它以100％宽度填充剩余空间。

输入100％宽度的剩余宽度

1 个答案: