HAML

Question

我正在尝试为我的页面设置表单字段样式，但我在弄清楚如何使用 haml 时遇到了一些问题。我可以切换回 html css 等等，但那有什么乐趣呢。

我有一个要设置样式的表单，因此我有一个用于提交的框和一个内联提交按钮。我不断收到各种愚蠢的布局。

Answer 1

我看到你（或 HAML）在错误的地方添加了一个 <br /> 标签（见下面的代码）。 <br /> 在之后 <label> 但它应该在 <input> 之后。这样，下一个标签和字段将转到下一行。

<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" />

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

    <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 />

这是 HAML 中的有效代码（因此 %br 转到下一行）：

%label{:for=>"name", } Name:
%input{:id=>"name", :type=>"text", :required => true}
%br
%label{:for=>"email", } Email address:
%input{:id=>"email", :type=>"email", :required => true}

查看 example on CodePen 渲染。

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

HAML - Form styling and tricks - new from plain static pages

css

ruby-on-rails

forms

styling