Take a look at these two JSFiddles:
Why is it that the first one shows my text aligned correctly, while the second one displays the first link lower than the second?
Stack Overflow requires me to include the code from both, so here is the code from the first one:
<ul>
<li>
<a class="link1">hello</a>
<span></span>
<a class="link2" href="www.google.com">there</a>
</li>
</ul>
.link1 {
display: inline-block;
}
.link2 {
display: inline-block;
}
The only difference in the second one is this single line of code added for overflow handling:
.link2 {
display: inline-block;
overflow: hidden;
}