如何強制搜索框與導航按鈕（will_paginate）位於同一行上？

我如何獲得will_paginate排列在鐵軌項目上的搜索框主要取自邁克爾哈特爾的鐵軌教程。我有軌是：如何強制搜索框與導航按鈕（will_paginate）位於同一行上？

<div class="row"> 
    <div class= "pull-left"> 
     <%= will_paginate %> 
    </div> 
    <div class="span4 offset4 pull-right"> 
     <%= form_tag users_path, :method => 'get', class: "navbar-search" do %> 
     <%= text_field_tag :search, params[:search], class: "search-query span3" %> 
     <%= submit_tag "Search", :name => nil, class: "btn btn-primary" %> 
     <% end %> 
    </div> 
</div>

導致這個網站（見here for the html in a jsfiddle）：

<div class="row"> 
<div class="pull-left"> 
<div class="pagination"> 
<ul> 
<li class="prev previous_page disabled"> 
<a href="#">← Previous</a> 
</li> 
<li class="active"> 
<a href="/users?page=1&search=&utf8=%E2%9C%93" rel="start">1</a> 
</li> 
<li> 
<a href="/users?page=2&search=&utf8=%E2%9C%93" rel="next">2</a> 
</li> 
<li> 
<a href="/users?page=3&search=&utf8=%E2%9C%93">3</a> 
</li> 
<li> 
<a href="/users?page=4&search=&utf8=%E2%9C%93">4</a> 
</li> 
<li class="next next_page "> 
<a href="/users?page=2&search=&utf8=%E2%9C%93" rel="next">Next →</a> 
</li> 
</ul> 
</div> 
</div> 
<div class="span4 offset4 pull-right"> 
<form class="navbar-search" method="get" action="/users" accept-charset="UTF-8"> 
<div style="margin:0;padding:0;display:inline"> 
<input type="hidden" value="✓" name="utf8"> 
</div> 
<input id="search" class="search-query span3" type="text" value="" name="search"> 
<input class="btn btn-primary" type="submit" value="Search"> 
</form> 
</div> 
</div>

現在你可以看到：here http://i39.tinypic.com/2res2dh.png 搜索框上面的will_paginate鏈接，怎麼辦我讓他們互相內聯？
（ps另外在jsfiddle中搜索按鈕不與內聯的搜索欄，獎勵積分如果你能告訴我爲什麼是這樣，那是不會發生在我的網站上，我複製了html）

來源

2013-06-26 Mike H-R

爲什麼不試試在搜索的div上留一些邊距，比如'margin-top：10px;' –

謝謝mohammed，這就是我最終做的。似乎已經排序，希望我能弄清楚是什麼引起了它，will_paginate會自動添加10px填充到頂部？我會打開這個問題，看看是否有人能告訴我爲什麼會發生這種情況。 –

您看到所有這些事情發生的原因是由於您要導入的Twitter Bootstrap的CSS樣式。同樣的原因也解釋了在搜索輸入後按鈕突破線路 - 這是由於.span4類的設置寬度。下面是至少在視覺上固定它爲我的風格：

.top-nav .span4{ 
    width:auto; 
} 
.top-nav .span4 .navbar-search{ 
    margin:20px 0; 
}

這裏有一個JSFiddle證明什麼，這達到（注意我增加了一個額外的類的.top-nav的包裝元素，更具體地定位與CSS選擇元素）。

反正，祝你好運！開始時使用CSS框架可能有點棘手，因爲有太多的預寫入樣式需要考慮。

來源

2013-06-26 13:45:24 Serlite

感謝您的出色答案！ –

爲什麼不嘗試在頂部添加一些邊距？

在您搜索的div上嘗試以下操作：margin-top: 10px;。

來源

2013-06-26 13:42:04

在視圖文件中，

<div class= "pull-left"> 
     <%= will_paginate %> 
</div>

這個div正在100％的寬度我想。所以請嘗試添加一個新類，在其中可以定義其寬度，以便您的搜索部分排成一行。

來源

2013-06-26 13:47:23

如何強制搜索框與導航按鈕（will_paginate）位於同一行上？

回答

相關問題