Question

当我使用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的外观？

Answer 1

这是我在标签和输入在同一行上使用的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

Answer 2

我猜这是规则

display: block;

将其更改为

display: inline

防止标签破坏线。

simple_form_for，在同一行上有标签和输入

2 个答案: