When dealing with a horizontal list, the issue arises when the first element is larger than the others. This can lead to a layout that looks like this.
Is there a way to vertically align the other elements without changing their size? I am aware of manually adjusting the margins but would prefer to avoid it if possible.
Below is the code from jsfiddle:
<div id="contentDiv">
<div id="topMenu">
<ul>
<li id='top_logo'></li>
<li>
1
</li>
<li>
2
</li>
<li>
3
</li>
</ul>
<br style="clear:both" />
</div>
Here is the corresponding CSS:
#topMenu ul li {
/* box size */
width: auto;
display: table;
float: left;
padding: 8px 10px 8px 10px;
margin: 5px;
/* color */
background-color:blue;
}
#top_logo{
background-color:red!important;
width:200px !important;
height:60px !important;
}