居中UL菜單未知寬度，溢出問題

Question

我創建了一個簡化的演示，我正在尋找完成，但基本上，當我調整大小（較小）時，我會移除我想要刪除的滾動條。

添加overflow：隱藏到導航元素的作品...直到我想添加到子菜單中。

http://jsfiddle.net/aKUAP/

HTML

<nav> 
    <ul> 
     <li><a href="#">Menu Item</a></li> 
     <li><a href="#">Menu Item</a></li> 
     <li><a href="#">Menu Item</a></li> 
     <li><a href="#">Menu Item</a></li> 
    </ul> 
</nav> 
<p>Looking for a way to hide the scrollbars created when the page is resized smaller. Using overflow:hidden on the nav element will hide any sub-menus used downt he line.</p> 

CSS

nav { 
    position: relative; 
    zoom: 1;  
    border-top: 1px solid #ccc; 
    border-bottom: 3px solid #ccc;  
    float: left; 
    width: 100%; 
    /*overflow: hidden; */ 
} 
ul { 
    clear: left; 
    float: left; 
    position: relative; 
    left: 50%; 
    text-align: center; 
} 
ul li { 
    float: left; 
    position: relative; 
    right: 50%; 
} 
ul a { 
    padding: 5px; 
    font-size: 11px; 
    display: block; 
} 
p { 
    text-align: center; 
    padding: 30px; 
} 

也許有定心在100％的寬度未知項的UL菜單更好的技術？

Answer 1

你可以切換到使用overflow-x: hidden：http://jsfiddle.net/aKUAP/2/

也許有定心未知 項目100％寬度的UL菜單更好的技術？

是的，有。切換到ul上的display: inline-block和nav上的text-align: center：http://jsfiddle.net/aKUAP/3/