链接不内联，因为在它自己的div？

Question

这些链接都是水平对齐的，直到我把它们中的一个放在它自己的div中，以便在我链接到它的页面时改变它的颜色。

现在我不能让他回去排队。

<div class="navigation">
  <a href="./productions.html">Mes productions</a>
  <a href="./DJ.html">DJ</a>
  <a target="_blank" href="./CV.pdf">Mon CV</a>
  <div id="contact">
    <a href="./contact.html">Me contacter</a>
  </div>
</div>

.navigation {
  padding: 40px 0px;
  position: relative;
  text-align: center;
  width: 100%;
  font-size: 30px;
}

.navigation a {
  background: black;
  border: 1px solid grey;
  border-radius: 7px;
  color: white;
  display: inline-block;
  margin: 100px 35px;
  padding: 14px;
  text-decoration: none;
  opacity: 0.75;
  font-family: impact;
}

.navigation a:hover {
  background: white;
  border: 1px solid black;
  color: black;
}

#contact a {
  background: white !important;
  color: black !important;
  display: inline-block !important;
}

Answer 1

您需要在display: inline-block上设置#contact，而不是#contact a。