logo标签列表

JADE中行内文本和输入项之间的空格是什么？

pug
14

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

我的输出结果是： Attached Image is my output

我无法在标签和文本区域之间添加空格。

1
这看起来更像是 CSS 的问题而不是 Jade 的问题。 - Jonathan Ong
2
不，这不是CSS的问题。inline-block元素如果没有直接堆叠在一起，它们之间会有几个像素的空白，而直接堆叠在一起的元素则不会有。这是一个HTML问题，在模板语言中需要加以考虑。Slim通过允许您设置是否要有尾随空格来解决这个问题。默认情况下没有尾随空格。 - Larry
4个回答
9

如Jonathan Ong所建议，您可以在CSS中添加边距，或者在您的标签和文本区域之间添加|  或 span  

1
请参考：https://dev59.com/BmIj5IYBdhLWcg3wAwz4#22220139 - rriemann
4
这不是一个好主意，因为提交可以删除尾随的空格。 - Joseph Callaars
1
边距不是正确答案。边距是CSS。尾随空格是多个未直接相邻堆叠的内联块元素的行为。这是一个HTML问题。使用CSS、HTML实体或任何其他选项都是一种hack。Jade需要考虑到人们实际上想要尾随空格。 - Larry
1

还有一个“pretty”选项。

您应该能够像这样调用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')
通过 CLI 使用 --pretty，通过 API 使用 {pretty: true} 并不能帮助您在行内元素之间获得空格。相反，它只会在块级元素之间提供包括换行和缩进的空格。 - matty
0

选项1（我的选择）

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

选项二

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

选项3

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

还有其他的……

0

正如其他答案中已经确定的那样，问题实际上是由Jade创建的html而不是css引起的。话虽如此，一种在不改变标记的情况下创建一些空间的方法是在label右侧添加一个margin。

@leff提到使用=' '。我以前从未见过这个，而且在Jade文档中也找不到相关参考。我很高兴它能够工作，但是没有看到文档，我不敢在生产中使用它。

我认为最好的选择是在需要插入允许文本换行的空格时使用 。如果您真的想防止文本元素换行， 可能适用于您所描述的情况。我更倾向于允许所有内容自由换行和流动，因此通常在需要确保Jade输出空格时使用 。

您可以在w3c字符实体参考页面上找到 和其他几个“空格”替代方案。

我之前对于=的文档理解有误。它在Jade文档的“代码”页面中可以找到（http://jade-lang.com/reference/code/）。 - matty
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接