将ul定位在固定div内

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

在这里查看更新的小提琴 。

变化在这里

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

不过你在右手边有差距。 这可以通过负边距消除。