`<nav>` 和 `<center>` 中的下拉菜单未居中

Posted 2023-04-13

【中文标题】`<nav>` 和 `<center>` 中的下拉菜单未居中

【英文标题】：Drop down menu in `<nav>` and `<center>` not centered

【发布时间】：2019-01-24 21:35:45

【问题描述】：

感谢这里的好人，我已经修复了下拉菜单的一个问题。现在我还有一个小问题。我的导航栏中的下拉菜单未居中。它应该在“Works”的正下方，但它被移到了左边。

这是我的代码：

nav 
  list-style-type: none;
  margin: 0;
  padding: 0px;
  overflow: hidden;
  margin-bottom: 30px;
  line-height: 1.5em;
  text-decoration: none;


nav a,
.dropbtn 
  display: inline;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 25px;
  font-family: "mrs-eaves";


.dropbtn 
  background: none;
  border: none;


.dropdown 
  overflow: hidden;


.dropdown 
  cursor: pointer;
  font-size: 25px;
  border: none;
  outline: none;
  color: black;
  padding: 14px 16px;
  background-color: inherit;
  font-family: "mrs-eaves";
  margin: 0;
  text-decoration: none;


nav a:hover,
.dropbtn:hover,
.dropdown:hover,
.dropdown-content a:hover,
.dropbtn:focus 
  background-color: rgb(247, 219, 255);
  cursor: pointer;


.dropdown-content 
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;


.dropdown-content a 
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: center;
  position: relative;


.show 
  display: block;

<nav>
  <center>
    <a href="index.html">Home</a>
    <button class="dropbtn" onclick="myFunction()">Works
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content" id="myDropdown">
      <a href="drawing.html">Drawing</a>
      <a href="animation.html">Animation</a>
      <a href="design.html">Design</a>
    </div>
    <a href="about.html">About</a>
    <a href="contact.html">Contact</a>
    <a href="links.html">Links</a>
  </center>
</nav>

【问题讨论】：

myFunction 在哪里？请edit您的帖子并确保提供minimal reproducible example。

还要注意<center> 是一个过时的 元素，不应再使用。我不知道他们为什么一直教这些东西。

@metrocode ,检查我的答案

【参考方案1】：

这是我的解决方案，我将button 和dropdown-content 与span 标签包装在一起，类名为holder，并使其成为position: relative。这将确保dropdown-content 将定位到其span 父级。

我还删除了 nav 标签上的 overflow:hidden 属性，因为下拉菜单不可见

我已经添加了

 left: -26px;
 top: 30px;

为了将菜单直接定位在button下方

nav 
  list-style-type: none;
  margin: 0;
  padding: 0px;
  /*overflow: hidden;*/
  margin-bottom: 30px;
  line-height: 1.5em;
  text-decoration: none;


nav a,
.dropbtn 
  display: inline;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 25px;
  font-family: "mrs-eaves";


.dropbtn 
  background: none;
  border: none;


.dropdown 
  overflow: hidden;


.dropdown 
  cursor: pointer;
  font-size: 25px;
  border: none;
  outline: none;
  color: black;
  padding: 14px 16px;
  background-color: inherit;
  font-family: "mrs-eaves";
  margin: 0;
  text-decoration: none;


nav a:hover,
.dropbtn:hover,
.dropdown:hover,
.dropdown-content a:hover,
.dropbtn:focus 
  background-color: rgb(247, 219, 255);
  cursor: pointer;


.dropdown-content 
  display: block; /*Added for testing purpose*/
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  
   left: -26px;
   top: 30px;


.dropdown-content a 
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: center;
  position: relative;


.show 
  display: block;


.holder
position:relative;


.centertext-align:center;

<nav>
  <div class="center">
    <a href="index.html">Home</a>
    <span class="holder">
    <button class="dropbtn" onclick="myFunction()">Works
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content" id="myDropdown">
      <a href="drawing.html">Drawing</a>
      <a href="animation.html">Animation</a>
      <a href="design.html">Design</a>
    </div>
    </span>
    <a href="about.html">About</a>
    <a href="contact.html">Contact</a>
    <a href="links.html">Links</a>
  </div>
</nav>