Question

如何在编辑器中使用换行符而不会在模板中出现恼人的空格？

有一个我的意思的例子：

<nav id="navbar">
    <ul>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
    </ul>
</nav>

Fiddle1: newlines = annoying spaces

<nav id="navbar">
<ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
</nav>

Fiddle2: no newlines = perfect result

Answer 1

您可以添加float: left;

#navbar ul li {
    float: left;
}

小提琴：http://jsfiddle.net/zo492g3y/1/

可在以下位置找到内联块之间删除空白区域的完整指南：Fighting the Space Between Inline Block Elements。

Answer 2

使用HTML注释，如果您希望代码可读，则是另一种选择

<nav id="navbar">
<ul>
    <li><a href="#"></a></li><!--
    --><li><a href="#"></a></li><!--
    --><li><a href="#"></a></li><!--
    --><li><a href="#"></a></li>
</ul>

Answer 3

按enter键与按space相同，只要它们不是float:left即可。希望这有帮助！

Answer 4

我知道这并不能让您的HTML非常适合阅读，但无需诉诸css hacks等就能解决问题...

<nav id="navbar">
    <ul>
        <li><a href="#"></a></li><li>
        <a href="#"></a></li><li>
        <a href="#"></a></li><li>
        <a href="#"></a></li><li>
    </ul>
</nav>

Answer 5

尝试使用margin-left:负值

HTML编辑器中的NewLine在网站中留下了空间

5 个答案: