<li> 之间有换行符

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 +浮动是你的朋友。

Answer 4

HTML是空白独立 - 因此增加换行应该没有影响。有些浏览器的渲染引擎不完全得到这个权利但是。

你可能想要做的就是添加

float: left;

要贵丽标签，让他们彼此相邻。