下拉导航菜单 <li> 居中问题

Question

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

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

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

麻烦制造者来了。

<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;
}

Answer 2

在您的代码中，以下代码将针对所有 li 元素。如果您只想应用第一级子级，请使用 >。这将解决您的 space 问题。

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

改成下面的样子

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

DEMO

下拉导航菜单 <li> 居中问题

Dropdown navigation menu <li> centering issue

html

css

centering

navigationbar

drop-down-menu