我有一个由带有 display: inline 的
这些元素应该无缝地彼此相邻。
在源代码中，我希望将每个 li 放在一行上，以便于调试：
<li class="item1 first"> ... </li>
<li class="item2"> ... </li>
...
但是，如果我在每个元素后面添加 \n ，则菜单项之间会有间隙。我认为这是预期的行为，但是有什么方法可以使用巧妙的“空白”设置或其他方式将其关闭吗？
编辑：我无法使用浮动，这是在 CMS 中，可以选择将列表项居中。
I have a horizontal menu consisting of <li> elements with display: inline.
The elements are supposed to be next to each other seamlessly.
In the source code, I would like to have each li on one line for easier debugging:
<li class="item1 first"> ... </li>
<li class="item2"> ... </li>
...
However, if I add a \n after each element, the menu items have a gap between each other. I gather this is the intended behaviour, but is there any way to turn it off using a clever "white-space" setting or something?
Edit: I can't use float, this is in a CMS with the option to center the list items.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
您可以避免渲染问题，但保持代码可维护，如下所示：
它删除了空格，但在文本编辑器中编辑项目仍然很容易，前提是您的 CMS 不会干扰您输入的标记！
You can avoid the rendering issues but keep the code maintainable like this:
It removes the whitespace but it's still easy to edit the items in a text editor, provided your CMS doesn't mess with the markup you enter!
你有能力编辑CSS吗？如果是这样，您可以尝试调整
根据您使用的浏览器，您可以获得 HTML Tidy http://users.skynet.be/ mgueury/mozilla/，它为您提供了整理源代码的选项，这对于调试可能足够有用
Do you have the ability to edit the CSS? If so, you could try adjusting the padding/margins on the <li> element. It does seem to be a lot of effort of readability.
Depending on what browser you are using you can get the HTML Tidy http://users.skynet.be/mgueury/mozilla/, which gives you the option to Tidy up your source, which might be useful enough for debugging
CSS+float 是你的朋友。
CSS+float is your friend.
HTML 与空白无关 - 因此添加换行符应该没有效果。然而，某些浏览器的渲染引擎并不能完全正确地做到这一点。
您可能想要做的是将
float: left;添加到 li 标记以使它们彼此相邻。
HTML is whitespace independent - so adding line breaks should have no effect. Some browser's rendering engines don't quite get this right however.
What you probably want to do is add
float: left;to your li tags to get them next to each other.