css - 输入剩余宽度的 100% 宽度

Question

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

我有一个输入字段，然后在它的右边是一个 <button>提交表格。该按钮内有一个图像，宽 70 像素。所以我需要做的是让输入字段占据剩余部分的 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; }

这会将提交按钮 float 到 div 的右侧，因为它设置了宽度和溢出:隐藏；在输入的父 div 上，它以 100% 的宽度填充剩余空间。