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 из этих ссылок? Я пробовал атрибут 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 с горизонтальными кнопками, вот простой метод fix, использующий сетку jqm. http://jsfiddle.net/Ltx2md34/