I am currently working on designing a basic navigation bar with five list items, each set at 20% width. The structure includes two text items, followed by an image logo in the center, and then another two text items.
However, I am facing an issue where when I insert an image in the third item, it causes the text in the neighboring list items to shift down. Despite checking for any margins or other factors affecting this behavior, I have been unable to resolve the issue no matter what adjustments I make.
If anyone has any insights or explanations regarding this problem, I would greatly appreciate your input!
HTML
<div class="navigation">
<div class="container">
<ul>
<li><a href="/">Home</a></li><!--
--><li><a href="/">Categories</a></li><!--
--><li><img src="http://www.placehold.it/140x64"></li><!--
--><li><a href="/">Contact</a></li><!--
--><li><a href="/">Personalise</a></li>
</ul>
</div>
</div>
CSS
.navigation {
top: 0;
width: 100%;
height: 64px;
position: fixed;
background: #ffffff;
border-bottom: 1px solid #dfdfdf;
}
.navigation .container {
width: 1000px;
margin: 0 auto;
padding: 0 10px;
}
.navigation ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.navigation li {
width: 20%;
height: 64px;
display: inline-block;
text-align: center;
font-size: 16px;
}