玉石间隔断裂按钮？

Question

我正在用Jade编写一些按钮，我对间距是如何工作的感到有点困惑。

上面的示例函数，但是所有的按钮都太靠近了。

第二个示例(在“a(href”之前添加了一个空格)完全破坏了链接，同时正确地间隔了按钮。

玉石对间隔那么敏感吗？有人能告诉我这里发生了什么吗？

div.sub-menu
  div.wrapper
   a(href="#/microsite/a")
    input(type="button", class="button white-button", value="A" )
   a(href="#/microsite/p")
    input(type="button", class="button white-button", value="P" )




div.sub-menu
  div.wrapper
    a(href="#/microsite/a")
    input(type="button", class="button white-button", value="A" )
    a(href="#/microsite/p")
    input(type="button", class="button white-button", value="P" )

Answer 1

是的，玉石对间距很敏感。间距决定每个标签的嵌套。

所以，下面的代码

element
  child

将生成此HTML：

<element><child></child></element>

代码

element
child

会产生这样的结果：

<element></element><child></child>

当然，当在浏览器中查看时，结果会完全不同。

要在每个链接前面添加一个空格，您需要在父标记之后(对于第一个链接可以这样做)或管系 (在第二个链接之前的一个单独行)添加它。

注意，当指定标记内容/管道文本时，实际的文本内容前面有一个空格。此空白未输出。因此，实际上，要传递空白，您需要一个|字符，后面跟着两个空格。

例如：

div.sub-menu
  //- div.wrapper is followed by *two* spaces
  div.wrapper  
   a(href="#/microsite/a")
    input(type="button", class="button white-button", value="A" )
   //- The | is followed by *two* spaces
   |  
   a(href="#/microsite/p")
    input(type="button", class="button white-button", value="P" )

当然，如果结果不令人满意，也可以使用CSS 填充和裕度来增加间距。

Answer 2

你在翡翠中使用“漂亮”选项吗？如果需要，请关闭它，因为HTML中的空格非常不可靠。