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

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/