在jQuery Mobile导航栏的左和右角对齐图标

Question

I'm using below code to add nav bar to my mobile website. Here I have two icon on the left side of nav bar. But I want to position the Next icon to the Right Side such that Two icon will be on corner of left and Right Side.

 <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> <div data-role="page"> <div data-role="footer" data-position="fixed" data-tap-toggle="false" data-theme="a"> <div data-role="navbar" data-iconpos="left"> <ul> <li><a href="#one" data-icon="arrow-l" >Previous</a></li> <li><a href="#two" data-icon="arrow-r" >Next</a></li> </ul> </div><!-- /navbar --> </div> </div> 

Here is the picture, I'd like to get the output

For some Reason the code is not working , So here is the link for my demo snippet Demo Snippets

Answer 1

You have to add some css fo this

.ui-block-b a .ui-btn-inner .ui-icon{
  left: auto;
  right: 5px;
}

Updated Codepen