用<！ - --->划分内联块

Question

你可能知道在'display：inline-block'元素之间注释空格的钩子。

您如何看待这样的解决方案：

    <div style="display:inline-block">Content 1</div><!--
---><div style="display:inline-block">Content 2</div><!--
---><div style="display:inline-block">Content 3</div>

我想用'---＆gt;'最后保持代码没有空格的精细缩进（我使用四位数的标签）。

另外一个问题：在Sublime文本2中，它不理解注释是以'---＆gt;'结束的并在评论后绘制所有代码并且不突出显示它。有一个简单的方法吗？ 谢谢。

Answer 1

请参阅HTML 5规范on comments：

  

评论必须从四个字符序列U + 003C LESS-THAN SIGN，U + 0021 EXCLAMATION MARK，U + 002D HYPHEN-MINUS，U + 002D HYPHEN-MINUS（<!--）开始。按照此顺序，注释可能包含文本，附加限制是文本不能以单个U + 003E GREATER-THAN SIGN字符（>）开头，也不能以“-”开头（U + 002D）字符后跟一个U + 003E GREATER-THAN SIGN（>）字符，也不包含两个连续的U + 002D HYPHEN-MINUS字符（--），也不结束一个“-”（U + 002D）字符。最后，评论必须以三个字符序列U + 002D HYPHEN-MINUS，U + 002D HYPHEN-MINUS，U + 003E GREATER-THAN SIGN（-->）结束。

您正在使用-结束评论文字，这是不允许的。这使编辑器的语法高亮显示混乱。

使用-->代替--->将解决此问题。 （我在我的subl2副本中对此进行了测试）。

Answer 2

对于您想要达到的效果，更简洁的解决方案是在元素上使用float:left。这是float设计的确切情况。 这样就可以在使用内联元素时消除空格问题。