When coding in HTML & PHP, line breaks get interpreted as a space character. This can be problematically when using a list in order to achieve a horizontal menu because the space changes the padding unpredictably. I use this workaround for this:
Note: The <li> elements will have a display: inline(-block); property.
<ul>
<li>...</li><?php
?><li>...</li><?php
?><li>...</li><?php
?><li>...</li><?php
?><li>...</li>
</ul>
This is really sad. I don't think it is supposed to be that way. I also don't want to mess up the code in a different way by say... add both </li> and the next <li> on one line (which is essentially the same as above).
Question: Is there a best practice solution for this?
After giving this some more research, I came up with the solution. Like here, people try to advertise my problem to others as a solution, which I won't accept.
But it's so simple. Don't use inline-block
.horizontal-menu ul li
{
display: inline-block;
}
But use table-cell!
.horizontal-menu ul li
{
display: table-cell;
}
Next time I have a similar issue, I will just try out more display options :)