HTML - 换行符被解释为空格字符[复制]

Question

This question already has an answer here:

• How do I remove the space between inline-block elements? 37 answers

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?

</div>

Answer 1

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 :)