0

jQuery Mobile の同じ行に検索入力と 3 つのボタンを追加しようとしていますが、本当にイライラすることがわかりました。これが私が試しているコードです:

<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 に答える