使用Ruby on Rails和Simple表单在一行上显示表单

时间:2013-07-22 15:02:45

标签: ruby-on-rails simple-form

HTML:

<div id="monitor" style="height: 22px;">
    <%= @event_status.video %> 
    <%= simple_form_for @new_event_status do |f| %>
        <%= f.input :audio %>
        <%= f.input :video %>
        <%= f.input :notes, :as => :string %>
    <% end %>
</div>

CSS:

#monitor #new_event_status .input {display : inline-block;}

只有在我删除表单上方显示的消息时才会有效。我如何在一条线上完成所有工作。

HTML制作:

<body scroll="no">

    <div id="wrapper" style="height: auto; width: auto; position: absolute; top: 0px; bottom: 90px; left: 0px; right: 0px;">

<div id="monitor" style="height: 22px;"> 
    Last status:  Audio: Good  Video: Good
    <form accept-charset="UTF-8" action="/event_statuses" class="simple_form new_event_status" id="new_event_status" method="post" novalidate="novalidate"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="HDyghGBaq8WB3a2wIEhN+FAHRUWzWBc0Bj4Vz0IVsx4="></div>
        <input class="button" name="commit" type="submit" value="Audio and Video is good">
        <input name="event_status[audio]" type="hidden" value="0"><label class="checkbox"><input class="boolean optional" id="event_status_audio" name="event_status[audio]" type="checkbox" value="1"></label>
        <input name="event_status[video]" type="hidden" value="0"><label class="checkbox"><input class="boolean optional" id="event_status_video" name="event_status[video]" type="checkbox" value="1"></label>
        <input class="string optional" id="event_status_notes" name="event_status[notes]" size="50" type="text">
        <input class="button" name="commit" type="submit" value="Create Event Status">
</form></div>

页面有更多HTML,但其余的只是为我的程序创建一个flash gui。这应该显示在生成的GUI之上。

1 个答案:

答案 0 :(得分:1)

#FORM_ID input {
  display: inline-block;
}

只是尝试使用Devise的登录表单,Devise也使用simple_form并且它可以工作。

enter image description here

注意!如果您的输入位于另一个元素内,则无效。在这种情况下,您必须将内联块应用于该元素。例如:

<强> HTML:

<form id="login">
  <div class="my-input">
    <your input here>
  </div>
</form>

<强>的CSS:

#FORM_ID .my-input {
  display: inline-block;
}