Question

我想将菜单水平居中。可以通过为margin-left分配#navigation来完成，但主要项目可能会增加，也会增加屏幕尺寸。

尝试将ul#navigation {float:left;}更改为

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

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的显示更改为inline-block似乎可以解决问题：

JSFiddle

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

将ul定位在固定div内

2 个答案: