0

当我使用 simple_form_for 创建表单时，它会将标签放在输入下方，如下所示：

名字
_ _

但我希望他们成为：

名字_ _

如果我查看生成的 html，我会看到：

<div class="input string optional name">
    <label class="string optional" for="name">date from</label>
    <input class="string optional" id="name" name="anf[name]" size="50" type="text" value="">
</div>

但我不明白在风格中，有什么设置使它打破了界限；这是计算的样式：

color: rgb(51, 51, 51);
display: block;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 13px;
height: 65px;
line-height: 18px;
width: 940px;

无论如何，有没有办法自定义simple_form_for的这种外观？

4

2 回答 2

2

这是我使用的 SimpleForm 示例，其中标签和输入位于同一行...

HTML

<%= simple_form_for(@proteam) do |f| %>
  <%= f.input :name %>
  <%= f.input :city %>
  <%= f.input :mascot %>
  <%= f.button :submit %>
<% end %>

CSS

.simple_form label {
  float: left;
  width: 100px;
  text-align: right;
  margin: 2px 10px;
}

.simple_form div.input {
  margin-bottom: 10px;
}

这基本上来自http://railscasts.com/episodes/234-simple-form-revised

于 2013-06-24T15:39:08.293 回答
1

我想这是规则

display: block;

将其更改为

display: inline

以防止标签断线。

于 2013-06-24T15:33:46.057 回答