Jquery-mobile header右边的两个图标彼此相邻

Question

在data-type='header'中有3个图标，我如何将1放在左侧，另外2放在标题面板的右侧?

<div data-role="header" data-theme="a" data-position="fixed">
    <center><img src="img/logo.png" style="height: 32px;"></center> 
    <a href="#nav-panel" data-icon="bullets" class="ui-alt-icon" data-iconpos="notext" id="headmenu">Menu</a>
    <a href="#" data-icon="recycle" class="ui-alt-icon" data-iconpos="notext" id="refresh">Home</a>
    <a href="#" data-icon="home" class="ui-alt-icon" data-iconpos="notext" id="homebut">Home</a>
</div>

这将把第三个图标放在新行

Answer 1

适用于:

<div data-role="header" data-theme="a" data-position="fixed">
    <a href="#nav-panel" data-icon="bullets" class="ui-alt-icon" data-iconpos="notext" id="headmenu">Menu</a>
    <div data-role='control-group' data-type="horizontal" class="ui-btn-right" >
        <a href="#" class="ui-btn ui-corner-all ui-icon-refresh ui-btn-icon-notext ui-alt-icon" id="homebut">Home</a>           
        <a href="#" class="ui-btn ui-corner-all ui-icon-home ui-btn-icon-notext ui-alt-icon" id="homebut">Home</a>
    </div>
</div>

Answer 2

我有一个工作，

HTML:

<div data-role="header" data-theme="a" data-position="fixed">
    <div data-type="horizontal" class="ui-btn-left">
        <a href="#nav-panel" data-role="button"  data-icon="bullets" class="ui-alt-icon" data-iconpos="notext" id="headmenu">Menu</a>
    </div>
    <img src="img/logo.png" style="height: 32px;" />
    <div data-type="horizontal" class="ui-btn-right" >
        <a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="notext">Up</a>
        <a href="#" data-role="button" data-icon="home" data-iconpos="notext" id="homebut">Home</a>
    </div>
</div>

CSS:

.ui-header-fixed{
      text-align: center;
      padding-bottom: 5px;
}

JS Fiddle的一个示例