如何在标题栏中添加多个按钮？

Question

（免责声明：我是jQuery mobile的新手。）

我有一个带有后退按钮的标题栏，一些标题文本，然后是一个主页按钮。

代码：

<div class="headerDiv" data-role="header" data-theme="b" data-position="fixed">
    <a id="backButton" data-role="button" data-direction="reverse" data-rel="back" data-icon="arrow-l" data-iconpos="left" data-theme="a">Back</a>
    <h1>Search</h1>
    <a href="index.cfm" data-role="button" data-icon="home" data-iconpos="left" data-theme="a">Home</a>
</div>

截图：

我正在尝试在标题文本的右侧和主页按钮的左侧添加一个额外的“注销”按钮。我希望它看起来就像其他2个按钮一样。当我尝试在其中添加它时，主页按钮将换行到下一行。

代码：

<div class="headerDiv" data-role="header" data-theme="b" data-position="fixed">
    <a id="backButton" data-role="button" data-direction="reverse" data-rel="back" data-icon="arrow-l" data-iconpos="left" data-theme="a">Back</a>
    <h1>Search</h1>
    <a href="logout.cfm" data-role="button" data-theme="a">Logout</a>
    <a href="index.cfm" data-role="button" data-icon="home" data-iconpos="left" data-theme="a">Home</a>
</div>

截图：

我做了一些研究（也就是谷歌搜索，以及围绕其他SO帖子），并提出了以下代码，它在标题文本的右侧添加了一种子按钮栏：

<div class="headerDiv" data-role="header" data-theme="b" data-position="fixed">
    <a id="backButton" data-role="button" data-direction="reverse" data-rel="back" data-icon="arrow-l" data-iconpos="left" data-theme="a">Back</a>
    <h1>Search</h1>
    <div class="ui-btn-right" data-role="controlgroup" data-type="horizontal">
        <a href="logout.cfm" data-role="button" data-theme="a">Logout</a>
        <a href="index.cfm" data-role="button" data-icon="home" data-iconpos="left" data-theme="a">Home</a>
    </div>
</div>

截图：

这是我设法得到的最接近的，但我真的希望将注销和主页按钮作为单独的离散按钮。我喜欢默认标题栏的外观，并希望以某种方式调整它，而不是自定义我自己的导航栏。有没有办法实现这个目标？