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

我想在图像的右侧显示输入标签type="checkbox"和type="file"。如何更改我的来源？如何在图像的右侧显示输入标签

我使用的Rails 4.

\视图\共享\ _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; 
}

来源

2014-09-24 SamuraiBlue

尝试这种'.photo IMG，.photo标签，.photo输入{显示：内联块;}' – 2014-09-24 05:38:49

由 “所述图像的右部分” 你的图像内是什么意思？ – rorofromfrance 2014-09-24 05:43:01

谢谢@Suresh Ponnukalai，它适用于我添加您评论的代码。 – SamuraiBlue 2014-09-24 06:00:23

将此内容添加到你的řCSS

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

来源

2014-09-24 05:44:29 Fergoso

谢谢@Fergoso，它的工作原理没有'float：left;'@Suresh Ponnukalai在上面评论过。 – SamuraiBlue 2014-09-24 05:58:44

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

回答

相关问题