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;
}

如何在图像的右侧显示输入标签

1 个答案: