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提供了一个如何实现这一目标的工作演示。它使用overflow属性。演示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>

内联响应表单元素

2 个答案: