<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 7 年前。
<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 7 年前。
我正在尝试为我的页面设置表单字段样式，但我在弄清楚如何使用 haml 时遇到了一些问题。我可以切换回 html css 等等，但那有什么乐趣呢。
我有一个要设置样式的表单，因此我有一个用于提交的框和一个内联提交按钮。我不断收到各种愚蠢的布局。
最佳答案
我看到的是您(或 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渲染。
关于css - HAML - 表单样式和技巧 - 纯静态页面的新功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35927411/