全宽输入附加搜索按钮(Full width input-append search button)

如何使这个搜索表单全宽像它下面的按钮？

<form class="form-search">
  <div class="input-append">
    <input type="text" class="input-small search-query">
    <button type="submit" class="btn">Search</button>
  </div>
</form>

Answer 1:

完成

http://jsfiddle.net/MgcDU/6033/

使用的方法从这里：

http://boulderinformationservices.wordpress.com/2011/02/02/input-field-and-submit-button-on-the-same-line-full-width/

<div class="container">
    <div class="row">
        <div style="width:100%;background-color:#d0d0d0;text-align:center;">Example of a Full row</div>
    </div>
    <div class="row">
        <div class="span12 pull-right">
            <form class="form-inline">
                <button type="submit" class="btn" style="float:right;">Button</button>
                <div style="overflow: hidden; padding-right: .3em;">
                    <input style="height:1.6em;width:100%" type="text" placeholder="full width minus button width" />
                </div>
            </form>
        </div>
    </div>
</div>

Answer 2:

令。输入，追加有一个特定的宽度，然后给你.search查询的100％的宽度和你.btn的100％的宽度

这是最好的没有更多的细节，我们可以做的 - 像正在控制这个CSS或者你在做网页上的内容的例子。

文章来源: Full width input-append search button