HTML - 换行符被解释为空白字符[重复]答案

【问题标题】：HTML - Line break gets interpreted as whitespace character [duplicate]HTML - 换行符被解释为空白字符[重复]
【发布时间】：2014-10-19 07:33:05
【问题描述】：

在 HTML 和 PHP 中编码时，换行符 被解释为空格字符。当使用列表来实现水平菜单时，这可能会出现问题，因为空间会不可预测地改变填充。我为此使用此解决方法：

注意：<li> 元素将具有 display: inline(-block); 属性。

<ul>
    <li>...</li><?php
    ?><li>...</li><?php
    ?><li>...</li><?php
    ?><li>...</li><?php
    ?><li>...</li>
</ul>

这真是令人难过。我不认为它应该是那样的。我也不想以不同的方式弄乱代码...在一行上添加</li> 和下一个<li>（这与上面的基本相同）。

问题：对此有最佳实践解决方案吗？

【问题讨论】：

尝试在html中使用
标签
如果你想让源文件有一个换行符，可以使用“\r\n”。正如@arkascha 所说，如果它们在源代码中一起运行，它不应该影响实际显示......如果这实际上是你所指的......
这很好。事实上，空白（无论哪个）在 html 标记中没有布局效果。这是设计使然。相反，您必须使用显式换行符或样式来获得所需的效果。
但空格将<li> 元素按其字符宽度分隔。你是如何style这样的？
寻求“最佳实践解决方案”往往主要基于意见，尤其是在未设置标准或符合审美标准时（代码的样子）。

【解决方案1】：

在对此进行了更多研究之后，我想出了解决方案。像 here 一样，人们试图向其他人宣传我的问题作为解决方案，我不会接受。

但它就是这么简单。不要使用内联块

.horizontal-menu ul li
{
    display: inline-block;
}

但是使用表格单元格！

.horizontal-menu ul li
{
    display: table-cell;
}

下次遇到类似问题时，我会尝试更多display 选项:)

【讨论】：