html - 下拉导航菜单 居中问题

Question

我花了几个小时在网上浏览大量代码，试图使这个下拉菜单居中，但没有成功。我觉得我已经将代码中的所有内容都更改了两次，而我已经走到了尽头。

如您所见，下拉列表右侧和包含它的无序列表之间有空格。

我也无法使用下拉菜单进行任何转换，因此如果您也想分享一些相关信息，我们将不胜感激。

麻烦制造者来了。

<li class="nav"><a href="#" id="about">PORTFOLIO</a>
    <ul id="portfolio_menu">
        <li><a href="#" id="paintings">PAINTINGS</a></li>
        <li><a href="#" id="drawings">DRAWINGS</a></li>
        <li><a href="#" id="cartoons">CARTOONS</a></li>
    </ul>
</li><!--portfolio-->

JSFiddle

Answer 1

您的列表中有边距，因为您的 css 中有它。删除 margin-right:4px;。如我所见，文字居中。请详细说明。

ul#navbar_ul li{  width: 125px;
  text-align: center;
  display: inline;
  float: right;
 margin-right: 4px; /*REMOVE THIS*/
  position: relative;
}