在<li>之间添加换行符

Question

我有一个由<li>元素组成的水平菜单，其display: inline。

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

在源代码中，我希望每个li都在一行上，以便更容易进行调试：

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

然而，如果我在每个元素后添加\n，菜单项之间会有间隙。我想这是预期行为，但是否有任何方法使用聪明的“white-space”设置或其他方式关闭它呢？

编辑：我不能使用float，因为这是在具有居中列表项选项的CMS中。

- Pekka

Answer 1

你可以按照以下方式避免呈现问题，同时保持代码易于维护：

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

它可以去除空白符，但只要你的CMS不对输入的标记进行处理，就仍然容易在文本编辑器中编辑这些项！

- John O'Rourke

---

嘿，这是个好主意！我想我会使用它。 - Pekka

我也想建议同样的事情，约翰。新行字符被视为像其他空格一样的空格，大多数浏览器将其转换为单个空格，用于分隔单词或任何元素。如果您将新行放在标记内部，则浏览器不会呈现它。 - Tracy Probst

Answer 2

你有编辑 CSS 的能力吗？如果有，你可以尝试调整

元素的 padding/margin。这样做似乎会花费很多精力来提高可读性。

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

- Jeepstone

---

HTML Tidy不是我的选择，因为我正在调试的是生产代码。但仍然是个好主意。 - Pekka

Answer 3

CSS + 浮动是你的好朋友。

- EricSchaefer

---

我无法使用浮点数，因为这是在一个带有居中列表项选项的CMS中。 - Pekka

Answer 4

HTML是独立于空格的，因此添加换行符不应该有任何影响。然而，一些浏览器的渲染引擎并没有完全理解这一点。

你可能想要做的是在li标签中添加

float: left;

以使它们相邻。

- Adam Pope

---

我无法使用浮点数，在 CMS 中有将列表项居中的选项。 - Pekka

Adam：当然，在“inline”模式下，空格不会被忽略。否则，你的句子中单词之间就没有空格了。 - Ben James