JQuery 移动导航栏列表项未垂直对齐

Question

我正在使用 JQuery Mobile 移动应用程序的桌面版本。当前页脚的显示方式存在问题，如下所示：

hmtl:

<div data-role="navbar">
        <ul>
            <li><%= link_to "How It Works", about_path,"data-transition"=>"slide", "data-icon" => "info" %></li>
            <li><%= link_to "Contact",  contact_path,"data-transition"=>"slide", "data-icon" => "mail" %></li>
            <li><%= link_to "News",     news_path,"data-transition"=>"slide", "data-icon" => "bars" %></li>
        </ul>
</div><!-- /navbar -->

产生：

关于如何垂直对齐所有 3 个链接有什么想法吗？我试过 vertical-align css 属性但没有用。

Answer 1

改变

<div data-role="navbar">
    <ul>
        <li><%= link_to "How It Works", about_path,"data-transition"=>"slide", "data-icon" => "info" %></li>
        <li><%= link_to "Contact",  contact_path,"data-transition"=>"slide", "data-icon" => "mail" %></li>
        <li><%= link_to "News",     news_path,"data-transition"=>"slide", "data-icon" => "bars" %></li>
    </ul>
</div><!-- /navbar -->

至此

<div data-role="footer" data-position="fixed">
    <div data-role="navbar">
        <ul>
            <li><a href="#" data-icon="info">One</a></li>
            <li><a href="#" data-icon="mail">Two</a></li>
            <li><a href="#" data-icon="bars">Three</a></li>
        </ul>
    </div>
</div>

您需要使用数据角色页脚。参见 jsfiddle http://jsfiddle.net/5Lz3zd9y/2/

或者，如果您运行在带有水平按钮的 jqm 中的其他任何地方解决这个问题，这里有一个使用 jqm 网格的简单修复方法。 http://jsfiddle.net/Ltx2md34/

JQuery 移动导航栏列表项未垂直对齐

JQuery Mobile navbar list items not vertically aligned

html

javascript

css

jquery

jquery-mobile