html - 内联响应式表单元素

Question

我有一个文本输入元素和一个提交输入元素，我需要内联和响应。问题是我无法找到一种方法来让文本输入元素流畅而不搞砸按钮的定位。任何帮助将不胜感激。

这是我正在使用的 html 结构。

<div class="search-call-to-action">
    <form action="#">
        <input type="text" name="search" placeholder="Search charities by keyword or name...">
        <input class="btn btn-primary btn-large" type="submit" name="submit" value="Search">
    </form>
</div>

这是我想要实现的目标的屏幕截图。文本输入需要流畅。 http://i.imgur.com/Ivty5Qq.png

Answer 1

我已经提供了一个 jsfiddle，其中包含有关如何实现此目的的工作演示。它使用溢出属性。演示 http://jsfiddle.net/kevinPHPkevin/vbdy9/

<form action="search.php" method="get">
    <input type="submit" name="search" value="Go" style="float: right" />
    <div style="overflow: hidden; padding-right: .5em;">
        <input type="text" name="term" style="width: 100%;" />
   </div>
</form>