Question

我一直在尝试编辑下拉菜单，以便子项位于父项下方的中心位置。我终于实现了居中，只是发现每次我在父项上盘旋以显示下拉菜单时，菜单的其余部分都会落到下拉菜单的底部。

以下是样本的链接，它在一侧有所有编码。预先感谢您的帮助！我刚刚开始使用CSS和HTML，无论我观看和阅读的视频和教程有多少，我似乎无法做到正确：（

https://www.w3schools.com/code/tryit.asp?filename=FEEMWLIFAMAO

Answer 1

尝试将vertical-align: top;添加到.dropdown css中，如下所示：

<强> CSS

.dropdown {
    vertical-align: top;
}

另外在单独的注释中，我会移除.dropdown-content上的宽度，而是将宽度放在.dropdown上，以确保它们的宽度相同，并且悬停时没有古怪的水平位置变化。另一种解决方案是使下拉位置：绝对;并将它们相对于链接定位。但是偏离主题：）

Answer 2

您可以将下拉内容的位置设置为absolute。要使下拉列表居中，您必须相对于父级的宽度定位它们。在.dropdown:hover .dropdown-content {：

中，这看起来像这样

display: block;
position: absolute;
left: calc((100% - 150px)/2);
width: 150px;
text-align: center;

进一步解释定位： 100%指的是您父母的宽度。除此之外，您指定的150px作为下拉内容的width。由于您希望框中心位于菜单按钮下方，因此必须在左侧和右侧之间划分这种差异，因此每边都有(100% - 150px) / 2的填充。

Answer 3

父元素和子元素您尝试将相对置于所述父级，并应用了position: relative属性他们的造型，这似乎不适合你似乎想要实现的结果。

阅读css position property及其值。

解释：您的子元素显示为block，根据定义，它自身占据一个水平空间，同时定位 relative到其父元素，因此在所述父元素下推送后面的其他相邻导航元素。

解决方案：您似乎尝试实现的导航效果通常是通过将子导航绝对相对于使其显示在悬停上的导航元素来完成的：它的父母。这样，所述子导航不会影响元素在 html 代码中分层放置的位置。

<强> CSS ：

.dropdown:hover .dropdown-content {
    position: absolute;
    display: block;
    width: 150px;
    text-align: center;
    //To position the element:
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
}

如何让我的下拉菜单块在父项目块下居中对齐？

3 个答案: