0

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 上方。

4

1 回答 1

1 
#FORM_ID input {
  display: inline-block;
}

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

在此处输入图像描述

笔记！如果您的输入在另一个元素内，这将不起作用。在这种情况下，您必须将 inline-block 应用于该元素。举个例子：

html:

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

CSS：

#FORM_ID .my-input {
  display: inline-block;
}
于 2013-07-22T15:22:34.047 回答