HTML
<ul>
<li><a href="#">Item #1</a></li>
<li><a href="#">Item #2</a></li>
<li><a href="#">Item #3</a></li>
<li><a href="#">Item #4</a></li>
<li><a href="#">Item #5</a></li>
</ul>
CSS
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
width: 20%;
}
Issue I am Facing
Despite setting the width of my <li> elements to 20%, when using display: inline-block; they appear wider than expected and the last one is forced to a new line. However, if I switch to using float: left;, the elements fit as desired with the same width...
Example on jsFiddle: Inline-Block vs. Float
I prefer using inline-block for its simplicity in not requiring a clearfix to expand the parent <ul>. If I could figure out how to properly apply a clearfix in this scenario, I might consider using float instead... Nonetheless, understanding why inline-block widths behave unexpectedly is still essential to me. The aim is for the five <li> elements to align in one row with 20% width each and content that isn't too wide...
The only related question I found was on Stack Overflow (but did not provide an answer): css inline-block vs float