html - CSS中的居中下拉菜单

Question

我无法将以下 CSS 下拉菜单居中:

.container {
  overflow: hidden;
  background-color: none;
  font-family: 'Questrial', sans-serif;
}

.container a {
  float: right;
  font-size: 20px;
  color: green;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: right;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 20px;
  border: none;
  outline: none;
  color: green;
  padding: 14px 16px;
  background-color: inherit;
  font-family: 'Questrial', sans-serif;
}

.container a:hover,
.dropdown:hover .dropbtn {
  background-color: none;
  color: green;
}

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

.dropdown-content a {
  float: none;
  color: green;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: none;
  color: green;
}

.dropdown:hover .dropdown-content {
  display: block;
}

我试过使用 position: absolute，并为“顶部”和“左侧”输入值，但这似乎只是移动了文本，并失去了下拉功能。

如有任何帮助，我们将不胜感激。

谢谢。

完整代码在这里:

gist.github.com/ruslan024/1a7d2ce4936a35369221a8f0e41c5dd7

Answer 1

你的意思是这样的吗？如果没有将完整的 HTML 格式化为一个片段(不仅仅是一些第 3 方要点)，我不得不做出一些假设。除此之外，它只是一些 CSS 调整。

.container {
  background-color: #eee;
  font-family: 'Questrial', sans-serif;
  text-align: center;
  height: 300px;
}

.container > a {
  display: inline-block;
  font-size: 20px;
  color: green;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropbtn {
  display: inline-block;
  font-size: 20px;
  padding: 14px 16px;
  background-color: inherit;
  font-family: 'Questrial', sans-serif;
  color: green;
}

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

.dropdown-content a {
  float: none;
  color: green;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: none;
  color: green;
}

.dropbtn:hover .dropdown-content {
  display: block;
}

<div class="container">
  <a href="contact.html">Contact Us</a>
  <div href="" class="dropbtn">Resources
      <span class="dropdown-content">
        <a href="market data bank.html">Market Data Bank</a>
        <a href="stock quotes.html">Stock Quotes</a>
        <a href="financial tools.html">Finacial Tools</a>
      </span>
  </div>
  <div href="" class="dropbtn">Services
      <span class="dropdown-content">
        <a href="planning and guidance.html">Planning and Guidance</a>
        <a href="portfolio advisory services.html">Portfolio Advisory Services</a>
        <a href="wealth planning.html">Wealth Planning</a>
    </span>
  </div>
  <a href="about.html">About Us</a>
  <a href="index.html">Home</a>
</div>