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

【问题标题】：space between inline text and input items in JADE?JADE中内联文本和输入项之间的空格？
【发布时间】：2012-10-07 09:03:42
【问题描述】：

如何在 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

我的输出是：

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

【问题讨论】：

这看起来更像是一个 CSS 问题而不是 Jade 问题。
不，这不是 CSS 问题。不直接堆叠在一起的 inline-block 元素将有几个像素的空白，而直接堆叠在一起的则不会。这是一个 HTML 问题，需要在模板语言中加以考虑。 Slim 通过允许您设置是否需要尾随空格来解决此问题。默认情况下没有尾随空格。

标签： pug

【解决方案1】：

按照 jonathan ong 的建议为 CSS 添加边距，或者您可以在标签和文本区域之间添加 | &nbsp; 或 span &nbsp;

【讨论】：

| 至少有两个空格也可以。见：stackoverflow.com/a/22220139/1407622
这不是一个好主意，因为提交可以删除尾随空格。
margin 不是正确答案。边距是 CSS。尾随空格是多个内联块元素的行为，这些元素没有直接堆叠在一起。这是一个 HTML 问题。使用 CSS、html 实体或任何其他选项都是一种 hack。 Jade 需要考虑到人们实际上想要尾随空格。

【解决方案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')

【讨论】：

--pretty（通过 CLI）和 {pretty: true}（通过 API）不能帮助您在行内元素之间获得空白。相反，它只在块元素之间提供空白，包括换行符和缩进。

【解决方案3】：

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

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

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

您会在 w3c character entity reference 页面上找到 &thinsp; 和一些其他“空格”替代品。

【讨论】：

我对 = 的文档有误。它在Jade docs' "Code" page。

【解决方案4】：

选项 1（我的选择）

input(type='button')
| &nbsp;
input(type='button')

选项 2

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

选项 3

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

还有其他的......

【讨论】：