I am working on a horizontal navigation bar using inline-block for the li tags. Here is the code snippet:
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">FEATURES</a></li>
<li><a href="#">ABOUT US</a></li>
</ul>
ul {
list-style-type: none;
background-color: green;
}
ul > li {
display: inline-block;
}
li a {
display: block;
border: 2px solid #00283a;
padding: 2.1em 1.5em 2.5em;
}
To see how it looks, you can check out the result here: http://jsfiddle.net/a0odv8tj/2/
- The height of the ul tag is 95px;
- The height of the li tags is 95.5938px;
I am facing an issue where the height of the ul tag is not equal to the height of the li tags. Can someone please help me understand why this is happening and how to fix it? Thank you!