位置ul到固定格內的中心

Question

我想水平居中菜單。可以通過爲#navigation分配margin-left來完成，但主要項目可以增加，也可以增加屏幕尺寸。

試圖改變ul#navigation {float:left;}到

ul#navigation {position:absolute;left:0;right:0;margin:0 auto;}，但沒有奏效。

http://jsfiddle.net/RLtkq/

HTML：

<div class="menu"> 
    <center> 
    <ul id="navigation"> 
     <li class="dropdown"> 
     <a href="#">Dropdown</a> 
     <ul class="sub_navigation"> 
      <li><a href="#">Sub Navigation 1</a></li> 
      <li><a href="#">Sub Navigation 2</a></li> 
      <li><a href="#">Sub Navigation 3</a></li> 
     </ul> 
     </li> 
     <li class="dropdown"><a href="#">Dropdown</a> 
     <ul class="sub_navigation"> 
      <li><a href="#">Sub Navigation 1</a></li> 
      <li><a href="#">Sub Navigation 2</a></li> 
      <li><a href="#">Sub Navigation 3</a></li> 
     </ul> 
     </li> 
    </ul> 
    </center> 
</div> 

CSS：

ul { 
    margin:0; 
    padding:0; 
    list-style-type:none; 
    min-width:200px; 
} 

ul#navigation { 
    float:left; 
} 

ul#navigation li { 
    float:left; 
    border:1px black solid; 
    min-width:200px; 
} 

ul.sub_navigation { 
    position:absolute; 
    display:none; 
} 

ul.sub_navigation li { 
    clear:both; 
} 

a,a:active,a:visited { 
    display:block; 
    padding:10px; 
} 

Answer 1

查看更新fiddle here。

的變化在這裏

ul#navigation { 
    float:left; 
    width: 100%; 
} 
ul#navigation li { 
    border:1px black solid; 
    min-width:200px; 
    display: inline-block; /* replaced float:left; */ 
} 

Answer 2

改變#navigation的li S的顯示器inline-block似乎解決了問題：

JSFiddle

你上了右側的縫隙儘管如此。這可以消除負利潤。