如何在圖像的右側顯示輸入標簽

Question

我想在圖像的右側顯示輸入標簽type="checkbox"和type="file" 。 如何更改來源？

我使用Rails 4。

\\ views \\ shared \\ _article_form.html.erb

<%= form_for(@article) do |f| %>
  <%= render 'shared/error_messages', object: f.object %>
  <div class="field">
    <%= f.hidden_field :category_id %>
    <%= f.fields_for :photos do |p| %>
      <%= p.hidden_field :article_id %>
      <div class="photo">
      <% if p.object.image and p.object.image.file %>
        <%= image_tag p.object.image.thumb.url %>
        <%= p.hidden_field :image_cache if p.object.image_cache %>
        <label><%= p.check_box :_destroy %>&nbsp;delete</label>   #I'd like to display this in the right side of image
      <% end %>
      <%= p.file_field :image %>   #I'd like to display this in the right side of image too
      </div>
    <% end %>
    <%= f.text_area :content, placeholder: "enter content..." %>
  </div>
  <%= f.submit class: "btn btn-large btn-primary" %>
<% end %>

查看HTML源

  <div class="photo">
    <img alt="xxxxx" src="/xxx/xxx/xxx.jpg" />
    <label><input name="article[photos_attributes][0][_destroy]" type="hidden" value="0" /><input id="article_photos_attributes_0__destroy" name="article[photos_attributes][0][_destroy]" type="checkbox" value="1" />&nbsp;delete</label>
  <input id="article_photos_attributes_0_image" name="article[photos_attributes][0][image]" type="file" />
  </div>

\\樣式表\\ custom.css.scss

.photo{
  margin: 0px 0px 10px 0px;
}

Answer 1

將此添加到您的CSS

.photo img, .photo input,.photo label{
    display: inline-block;
    float:left;
}