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

jquery-mobile标题右侧的两个图标彼此相邻

2 个答案: