pug - JADE中内联文本和输入项之间的空格？

Question

如何在 JADE 中的内联文本和输入项之间留出空格？

div(data-role="horizontal", data-theme="a", data-overlay-theme="a", data-inline="true",class="ui-bar ui-grid-c")
                        div(class='ui-block-a')
                            div(data-role='fieldcontain')
                                label(for='memberaddress') Address Proof
                                textarea(id='memberaddress',name='memberaddress')
                        div(class='ui-block-b')
                            div(data-role="fieldcontain")
                                label(for="proof") Proof ID
                                select(name='proof', id='proof', data-theme='a', data-icon='bank', data-inline='true', data-native-menu="false")
                                    option(value='0') Select Proof
                                    option(value='1') Voter ID
                                    option(value='2') Driving Licence
                                    option(value='3') PANCARD
                                    option(value='4') Ration Card
                        div(class='ui-block-c')
                            div(data-role="fieldcontain")                           
                                input(type='checkbox', name='addressmatchedCheck', id='addressmatchedCheck', data-inline="true")
                                label(for='addressmatchedCheck') Address Matched

我的输出是：

我无法在标签和文本区域之间获得空间。

Answer 1

按照 jonathan ong 的建议，在 CSS 中添加边距，或者您可以在标签和 textarea 之间添加 |  或 span  

Answer 2

还有“漂亮”选项

您应该可以像这样调用翡翠（请参阅http://jade-lang.com/api/）：

var fn = jade.compile('string of jade', {pretty: true});

它将在模板中所有节点之间的输出中插入换行符和缩进。

如果您只想插入一个空格，则可以选择

label(for='memberaddress') Address Proof
=' '
textarea(id='memberaddress',name='memberaddress')

Answer 3

正如在其他答案中已经确定的那样，问题实际上出在 Jade 创建的 html 而不是 css 上。也就是说，在不更改标记的情况下创建一些空间的一种方法是在label.

@leff 提到使用=' '. 我以前从未见过，而且我在 Jade 文档中找不到对它的引用。我喜欢它的工作原理，但是没有看到文档，我犹豫在生产中使用它。

我认为最好的选择是 在需要插入允许文本换行的空白时使用。 如果您真的想防止文本这些元素换行，则可能适用于您描述的情况。我更支持让一切都包裹和流动，所以我通常 在需要确保 Jade 吐出空间时使用。

您可以在w3c 字符实体参考页面上找到 和其他一些“空格”选项。

Answer 4

选项1（我的选择）

input(type='button')
|  
input(type='button')

选项 2

input(type='button')
= ' '
input(type='button')

选项 3

input(type='button')
|  
input(type='button')

不过还有其他的......