在Jade（express）的同一行中渲染多个控件？

Question

如何在Jade（express）的同一行中渲染多个控件？最终，我希望实现如下图

中所示的内容

| Login
br
br
| Username 
input#username(type='text', value='')
| Password
input#username(type='password', value='')           
br
br
input#btnSignin(type='button', value='Login')
hr

谢谢， 中号

Answer 1

首先，您的示例与 Node.js ， Express 或 Jade 无关，但这里是快速的修复你的问题，但更好的是@Phoenix在上面的评论中所说的。我只是不想写这个'代码'，我相信你可以自己做。

首先，您的示例将在 HTML 中创建类似的内容：

Login<br/><br/>Username 
<input id="username" type="text" value=""/>Password
<input id="username" type="password" value=""/><br/><br/>
<input id="btnSignin" type="button" value="Login"/>
<hr/>

这不是你想要的，但这是 Jade 中的一个快速而又脏的版本，看起来更像你给出的例子（你的图片）：

| Login
br
br
div(style="float: left;") Username
  br
  input#username(type='text', value='')
div(style="float: left;") Password
  br
  input#username(type='password', value='')
div(style="float: left;")
  br
  input#btnSignin(type='button', value='Login')
br
br
hr

这将最终跟随 HTML ：

Login<br/><br/>
<div style="float: left;">Username<br/>
  <input id="username" type="text" value=""/>
</div>
<div style="float: left;">Password<br/>
  <input id="username" type="password" value=""/>
</div>
<div style="float: left;"><br/>
  <input id="btnSignin" type="button" value="Login"/>
</div><br/><br/>
<hr/>

最后：这是两个版本的jFiddle。