During my CSS work on a navigation bar, I came across an unusual behavior.
First Attempt:
#nav li {
display: inline-block;
}
#nav li {
font-size: 1em;
line-height: 40px;
width: 120px;
height: 40px;
font-family: Arial, sans-serif;
}
The result was as expected:
However, upon combining the two CSS statements:
#nav li {
display: inline-block;
font-size: 1em;
line-height: 40px;
width: 120px;
height: 40px;
font-family: Arial, sans-serif;
}
I unexpectedly got a block-style output:
If anyone can shed light on this issue, it would be greatly appreciated. Thank you.
Full (Relevant) CSS:
#nav li {
display: inline-block;
}
#nav ul {
text-align: center;
list-style: none;
background-color: gray;
margin: 0;
}
#nav li {
font-size: 1em;
line-height: 40px;
width: 125px;
height: 40px;
font-family: Arial, sans-serif;
}
#nav a {
text-decoration: none;
color: white;
display: block;
transition: .5s background-color;
}
#nav a:hover {
background-color: black;
}<div id="nav">
<ul>
<li><a href="\Home.html">Home</a></li>
<li><a href="\News.html">News</a></li>
<li><a href="\Content.html">Content</a></li>
<li><a href="\Products.html">Products</a></li>
</ul>
</div>