css - 避免导航栏文本被截断

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显示了您要实现的目标。