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

Answer 2

在您的代码中，以下代码将针对所有li elemnts。如果您只想申请第一级孩子，请使用>。这将解决您的空间问题。

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>居中问题

2 个答案: