避免導航欄的文本被切斷

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顯示器你想要達到的目標。