JQuery Mobile Navbar is bugging

Question

When I want to make a Navbar with JQM, the system is adding unnecessary &nbsp into the grid, which makes the navbar look weird.

I am using JQM 1.4.5 and Jquery 1.11.2.

Code:

<div id="home" data-role="page">
  <h1>Content</h1>
  <div data-role="footer">
    <div data-role="navbar">
      <ul>
        <li><a href="#" class="ui-btn-active">One</a></li>
        <li><a href="#">Two</a></li>
      </ul>
    </div><!-- /navbar -->
  </div>
</div>

Browser:

Answer 1

For people who are seeing this and having the same problem: If you copy the code for the widgets from the JQuery Mobile Demos, there are spaces between the tags which you will see in the browser. Delete them and it should look normal again.

Answer 2

Having the second tab dropped blow like that maybe caused by your css. Try using display: inline-block or even floats to get those items to align correctly.