jQuery Mobile的标题中有多个按钮和搜索位置？

Question

我正在尝试在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;
}

我可以使用JQM附带的默认图标，但放置最终看起来像这样：

我甚至尝试在按钮周围放置一个控制组，也在按钮和输入框周围，但是将按钮放在搜索框下方。

我如何在JQM中实现这一目标？

Answer 1

您是否尝试删除保证金？我发现这可能会导致一些问题。您也可以想要浮动图像。

我在这里有一个解决方案：http://jsfiddle.net/cncpts/B4Pa6/2/

Answer 2

我想我已经开始工作了！

<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>