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

您可以使用媒体查询来实现这一点。然后，您应该为每个分辨率创建查询。例子：

@media (min-width: 320px){

div
{
    //some propererties in ems
}

Answer 2

我提供了一个 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>