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

我的输出是：

我无法在label和textarea之间获得空间。

Answer 1

按照jonathan ong的建议为您的css添加保证金，或者您可以在标签和textarea之间添加 |  或 span  

Answer 2

还有＆＃34;漂亮＆＃34;选项

您应该可以像这样调用jade（参见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吐出空间时，我通常会使用 。

您会找到 和其他一些＆＃34;空间＆＃34; w3c character entity reference页面上的备选方案。

Answer 4

选项1 （我的选择）

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

选项2

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

选项3

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

还有其他人......