Question

我能够创建一个下拉菜单，但无法将文本居中。它的好像padding-left已设置但我没有设置它。我只需要帮助集中下拉菜单中的文字。 //下拉菜单

<!DOCTYPE html>
<html>
<head>
<style>
    .menu {
        background-color:grey;
        padding: 5px;
    }
    .menu li {
        list-style:none;
        padding: 3px;
    }
    .menu a {
        text-decoration: none;
        color: black;
    }
    .menu > li {
        display:inline;
    }
    .dropmenu {
        display:none;
        float:right;
        position:relative;
        top:18px;
        left:-422px;
    }
    .dropdown:hover > .dropmenu {
        display:block;
    }
    .dropmenu {
        background-color:grey;
    }


</style>
</head>
<body>

<ul class = "menu">
 <li><a href = "#">HOME</a></li>
 <li><a href = "#">ABOUT</a></li>
  <li class = "dropdown"><a href = "#">SPORTS</a>
   <ul class = "dropmenu">
    <li><a href = "#">NBA</a></li>
    <li><a href = "#">NFL</a></li>
    <li><a href = "#">MLB</a></li>
   </ul>
  </li>
 <li><a href = "#">CONTACTS</a></li>
 <li><a href = "#">BLOG</a></li>
</ul>

</body>
</html>

Answer 1

首先，在下拉菜单中使用text-align: center;。您的下拉菜单将偏离中心，因为您默认使用浏览器添加的下拉菜单中的默认填充和边距ul。您需要从下拉列表ul中删除该填充/边距。

.dropmenu {
    padding: 0;
    text-align: center;
}

如果执行此操作后下拉菜单变得太窄，您可能需要为下拉菜单设置特定宽度。

.dropmenu {
    padding: 0;
    text-align: center;
    width: 100%; /* same width as containing li */
}

jsFiddle：http://jsfiddle.net/7hjqjrjj/2/

如果您正在寻找清理/修复下拉菜单的对齐方式，请阅读以下内容。

您想将position: relative;应用于包含下拉菜单的li。然后将position: absolute;应用于该下拉菜单（ul）。您通常也会将left: 0;添加到drowpdown菜单（ul）。

将position: relative;应用于包含li会导致绝对定位的下拉菜单相对于包含li的位置，而不是像页面顶部那样的位置。

我们不希望下拉列表在包含li的锚标记或其他内容之后定位，因此我们使用绝对定位。

按如下方式更新CSS选择器：

.menu li {
    list-style: none;
    padding: 3px;
    position: relative;
}
.dropmenu {
    display: none;
    position: absolute;
    top: 18px;
    left: 0;
}

您可能需要摆弄top和left值。

jsFiddle：http://jsfiddle.net/7hjqjrjj/1/

在下拉菜单中将问题置于中心位置

1 个答案: