未知の幅、オーバーフローの問題のULメニューを中心に

Question

私は達成しようとしているものの簡略化したデモを作成しましたが、基本的にはサイズを変更すると、削除するスクロールバーが表示されます。

ナビゲーション要素にオーバーフロー：非表示を追加すると、サブメニューを追加するまで機能します。

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/