避免Navbar文本被截断

Question

以下内容：

  <div data-role="navbar">
  <ul>
    <li><a href="#page_1" data-transition="none">Heading 1</a></li>
    <li><a href="#page_2" class="ui-btn-active ui-state-persist">Heading 2</a></li>
    <li><a href="#page_3" data-transition="none">Heading 3</a></li>
    <li><a href="#page_4" data-transition="none">Heading 4</a></li>
    <li><a href="#page_map" data-transition="none">Map</a></li>
  </ul>

呈现为：

Hea... Hea... Hea... Hea... Map

在我的iPhone上。

是否可以修复它以便它呈现这样的东西：

Header 1  Header 2  Header 3  
     Header 4    Map

Answer 1

您可以像这样设置<ul>和<li> ...

ul {
    list-style-type:none;
    margin:0;
    padding:0;
    text-align: center;
}

li {
    display: inline;
}

此 Sample Fiddle 显示您要实现的目标。