链接不内联，因为在它自己的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。