HAML - 表单样式和技巧 - 来自纯静态页面的新功能

Question

我正在努力让我的表单字段样式为我的页面，但我有一些问题，弄清楚如何使用haml。我可以切换回html css等，但有趣的是什么。

我有一个表单，我正在尝试设置样式，因此我有一个提交框和内联提交按钮。我不断得到各种各样的愚蠢布局。

Answer 1

我看到的是您（或HAML）在错误的位置添加了<br />标记（请参阅下面的代码）。 <{1}} <br />之后的<{>}，但它应该在<label>之后。这样，下一个标签和字段将进入下一行。

<input>

请参阅下面的更新代码以获得正确的对齐方式：

＆＃13;

＆＃13;

<label for="user_username">Username</label>
<br />
<input autofocus="autofocus" type="text" name="user[username]" id="user_username" />

<label for="user_email">Email</label>
<br />
<input type="email" name="user[email]" id="user_email" />

<label for="user_password">Password</label>
<br />
<input autocomplete="off" type="password" name="user[password]" id="user_password" />

＆＃13;

＆＃13;

＆＃13;

这是HAML中的有效代码（因此 <label for="user_username">Username</label> <input autofocus="autofocus" type="text" name="user[username]" id="user_username" /><br /> <label for="user_email">Email</label> <input type="email" name="user[email]" id="user_email" /><br /> <label for="user_password">Password</label> <input autocomplete="off" type="password" name="user[password]" id="user_password" /><br />转到下一行）：

%br

请参阅呈现的example on CodePen。