html - 之间有换行符s

Question

我有一个水平菜单，由<li>带有display: inline.

这些元素应该无缝地彼此相邻。

在源代码中，我想将每个 li 放在一行中以便于调试：

<li class="item1 first"> ... </li>
<li class="item2"> ... </li>
...

但是，如果我\n在每个元素之后添加一个，菜单项之间就会有间隙。我认为这是预期的行为，但是有没有办法使用聪明的“空白”设置或其他东西来关闭它？

编辑：我不能使用浮动，这是在一个 CMS 中，可以选择将列表项居中。

Answer 1

您可以避免呈现问题，但保持代码可维护，如下所示：

<ul
  ><li>item 1</li
  ><li>item 2</li
  ><li>item 3</li
></ul>

它会删除空格，但在文本编辑器中编辑项目仍然很容易，前提是您的 CMS 不会与您输入的标记混淆！

Answer 2

你有能力编辑CSS吗？如果是这样，您可以尝试调整 <li> 元素上的填充/边距。它似乎确实需要大量的可读性。

根据您使用的浏览器，您可以获得 HTML Tidy http://users.skynet.be/mgueury/mozilla/，它为您提供了整理源代码的选项，这可能对调试很有用

Answer 3

CSS+float 是你的朋友。

Answer 4

HTML 是独立于空白的 - 所以添加换行符应该没有效果。然而，一些浏览器的渲染引擎并不完全正确。

您可能想要做的是添加

float: left;

到您的 li 标签以使它们彼此相邻。