0

我试图在 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 中实现这一点？

4

2 回答 2

1

您是否尝试删除边距？我马上看到这可能会导致一些问题。此外，您可能想要浮动您的图像。

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

于 2012-07-09T20:27:58.480 回答
0

我想我成功了！

<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-09T21:11:09.527 回答