Question

我有一个水平菜单，其中<li>元素包含display: inline。

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

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

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

但是，如果我在每个元素后添加\n，则菜单项之间会有间隙。我认为这是预期的行为，但是有没有什么方法可以使用聪明的“白色空间”设置将其关闭？

编辑：我不能使用float，这是在CMS中，可以选择使列表项居中。

Answer 1

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

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

它删除了空格但是在文本编辑器中编辑项目仍然很容易，只要你的CMS不会弄乱你输入的标记！

Answer 2

你有能力编辑CSS吗？如果是这样，您可以尝试调整＆lt; li＆gt;上的填充/边距。元件。它似乎需要很多可读性。

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

Answer 3

CSS + float是你的朋友。

Answer 4

HTML与空白无关 - 因此添加换行符应无效。然而，有些浏览器的渲染引擎并没有完全正确。

您可能想要做的是添加

float: left;

到你的li标签，让它们彼此相邻。