Question

正如标题所说，我的网页上有下拉菜单（模板，因为我想先让它们正确），并且他们已经将自己与父母的左边缘对齐。无论我尝试什么，我都无法在不改变物体的任何宽度或高度的情况下将它们全部正确地居中。我需要导航栏中的阻止链接保持相同的大小，以便只有在单词悬停时才会翻译。有没有办法解决这个问题，并保持其他一切相同？

Link to my Site

HTML and CSS（看起来不能让它在JSFiddle上工作......）

Answer 1

其他方法是使用absolute属性动态设置left和right的宽度。

你可以通过改变你的css来看到。

（注意！使用左右而不是宽度。）

nav {
  list-style-position: inside;
  list-style: none;
  height: 80px;
  left: 275px;
  right: 0px;
  padding: 0px;
  position: absolute;
  text-align: center;
}

Answer 2

我这样做的方法是将 position：relative 添加到以下选择器

nav ul li {
   width: auto;
   list-style: inside none none;
   display: inline-block;
   margin-right: 33px;
   height: 16px;
   vertical-align: middle;
   left: 0px;
   margin-left: 33px;
   position: relative;
}

我会将overview.ul放在左边：-25％就像这样

nav li ul {
    height: 70px;
    width: 102px;
    padding-left: 0px;
    position: absolute;
    top: 55px;
    border-radius: 9px;
    transition: all 0.2s ease 0s;
    left: -25%;    
    visibility: hidden;
    opacity: 0;
}

我现在在中心看到他们。希望有所帮助

当我希望它们完全居中时，纯CSS下拉菜单以左边距为中心

2 个答案: