jquery - 修复了 jQuery Mobile 的标题导航栏问题

Question

我正在尝试在我的应用程序中实现一个固定的导航栏，但我遇到了导航栏不显示的问题。它似乎出现折叠，请参阅下图以供参考：

它应该看起来像这样：

这是我正在使用的相关代码：

<div data-role="header" data-id="header" data-position="fixed">
            <div data-role="navbar">
                <ul>
                    <li><a href="index.html" data-role="button" data-icon="b" data-inline="true" data-iconpos="notext" class="ui-btn-right"></a></li>
                    <li><a href="index.html" data-role="button" data-icon="star" data-inline="true" data-iconpos="notext" class="ui-btn-right"></a></li>
                    <li><a href="index.html" data-role="button" data-icon="grid" data-inline="true" data-iconpos="notext" class="ui-btn-right"></a></li>
                    <li><a href="index.html" data-role="button" data-icon="search" data-inline="true" data-iconpos="notext" class="ui-btn-right"></a></li>
                </ul>
            </div><!-- /navbar -->
</div><!-- /header -->

通过在标题块之外实现导航栏，我能够成功实现第二张图像，但是我无法将其设置为固定位置。我确定我的 CSS 没有任何问题，因为我使用的是默认主题减去一些颜色调整。有什么建议么？

- 更新 -

按照这里的要求，在jsfiddle上实现了一个快速而肮脏的实现。

Answer 1

我删除了它data-role="button"，class="ui-btn-right"它制作了一个适当的导航栏。导航栏中的链接会自动设置为按钮样式并均匀分布。不确定是否data-inline="true"有必要，但我把它留在了。在我使用的导航栏中，我不使用它。

<div data-role="header" data-id="header" data-position="fixed">
            <div data-role="navbar">
                <ul>
                    <li><a href="index.html"  data-icon="b" data-inline="true" data-iconpos="notext"></a></li>
                    <li><a href="index.html"  data-icon="star" data-inline="true" data-iconpos="notext"></a></li>
                    <li><a href="index.html" data-icon="grid" data-inline="true" data-iconpos="notext"></a></li>
                    <li><a href="index.html" data-icon="search" data-inline="true" data-iconpos="notext"></a></li>
                </ul>
            </div><!-- /navbar -->
</div><!-- /header -->​

Answer 2

<div data-role="header">        
    <div data-role="navbar" data-iconpos="bottom">
        <ul>
            <li ><a  data-icon="search" href="#" href="a.html" >One</a></li>
            <li><a  data-icon="search" href="#" href="a.html" >Two</a></li>
            <li><a  data-icon="search" href="#" href="a.html" >Three</a></li>
        </ul>
    </div><!-- /navbar -->
</div><!-- /footer -->​

这段代码工作得很好。http://jsfiddle.net/K6GMG/4/ 我没有看到使用按钮作为标签的任何用途，因为它们已经是按钮。

但是当我添加它时，有些方法class="ui-btn-right"会破坏代码。