修复了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"时的一些方法是打破代码。