jQuery Mobile的標題中有多個按鈕和搜索位置？

我試圖在jQuery Mobile的同一行上添加一個搜索輸入和三個按鈕，但事實證明令人非常沮喪。這裏是我嘗試代碼：jQuery Mobile的標題中有多個按鈕和搜索位置？

<div data-role="header" class="header"> 
    <input type="search" name="search" id="search-header" value="" data-mini="true" data-inline="true" data-theme="c" /> 
    <a href="#menu_page" data-role="button" data-icon="search" data-iconpos="notext">Search</a> 
    <a href="#menu_page" data-role="button" data-icon="grid" data-iconpos="notext" data-rel="dialog">View</a> 
    <a href="#menu_page" data-role="button" data-icon="arrow-d" data-iconpos="notext" data-rel="dialog">Menu</a> 
</div>

隨着這個CSS：

.page .header .ui-input-search 
{ 
    margin-right: 90px; 
}

我OK使用默認的圖標來與JQM，但放置最終看起來像這樣雖然：

enter image description here

我甚至嘗試把一個controlgroup按鈕周圍唯一的並且是圍繞按鈕和輸入框，而是把搜索下方的按鈕框。

我如何在JQM中實現這一目標？

來源

2012-07-09 TruMan1

我想我得到它的工作！

<div data-role="header" class="header"> 
    <input type="search" name="search" value="" data-mini="true" data-theme="c" class="search-header" /> 
    <div class="ui-btn-right"> 
     <a href="#menu_page" data-role="button" data-icon="search" data-iconpos="notext">Search</a> 
     <a href="#menu_page" data-role="button" data-icon="grid" data-iconpos="notext" data-rel="dialog">View</a> 
     <a href="#menu_page" data-role="button" data-icon="arrow-d" data-iconpos="notext" data-rel="dialog">Menu</a> 
    </div> 
</div>

來源

2012-07-09 21:11:09 TruMan1

您是否嘗試刪除邊距？馬上我知道這可能會導致一些問題。你也可能想浮動你的圖像。

我這裏有一個解決方案：http://jsfiddle.net/cncpts/B4Pa6/2/

來源

2012-07-09 20:27:58 HjalmarCarlson

我曾嘗試刪除邊距。您的示例與最新的JQM分開：http://jsfiddle.net/B4Pa6/3/。自從花車嘗試覆蓋絕對值之後，這似乎也有點難以理解。 – TruMan1 2012-07-09 21:06:33

jQuery Mobile的標題中有多個按鈕和搜索位置？

回答

相關問題