Question

问题：

我的导航栏看起来与http://jquerymobile.com/test/docs/toolbars/footer-persist-a.html

中示例中的导航栏完全不同

我做错了什么/不同？

JS小提琴： http://jsfiddle.net/OpnSrce/dUcUF/

守则：

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset = "utf-8">
        <meta name = "viewport" content = "width=device-width, initial-scale=1">
        <title>AD&amp;D Spellbook</title>
        <style>
            @import url('http://code.jquery.com/mobile/1.1.0-rc.2/jquery.mobile-1.1.0-rc.2.min.css');
        </style>
        <script src = "http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src = "http://code.jquery.com/mobile/1.1.0-rc.2/jquery.mobile-1.1.0-rc.2.min.js"></script>
    </head>

    <body>
        <div data-role = "page" data-theme = "b">
            <div data-role = "header" data-position = "fixed" data-theme = "b">
            </div>
            <div data-role = "content" data-theme = "b">

            </div>
            <div data-role = "footer" data-position = "fixed" data-theme = "b">
                <div data-role = "navbar">
                    <ul>
                        <li>All Spells</li>
                        <li>Memorized Spells</li>
                        <li>Known Spells</li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
</html>

Answer 1

好的我改变了我的回答第一个版本错了。您遗失的是页脚中的<a>标记。

<div data-role="navbar">
    <ul>
        <li><a href="">All Spells</a></li>
        <li><a href="">Memorized Spells</a></li>
        <li><a href="">Known Spells</a></li>
    </ul>
</div>

Jquery Mobile Navbars Padding Wrong：太窄了

1 个答案: