跨度元素上傳圖片重疊上面的按鈕

我創建了一個寫文章的表單。
該表格由標題的text_field，內容的text_area，提交表單的按鈕以及用於上傳圖像的file_field組成。初級講座是代碼：跨度元素上傳圖片重疊上面的按鈕

<%= form_for(@atp_article, html: { multipart: true }) do |f| %> 
    <%= render 'shared/error_messages', object: f.object %> 
    <div class="article_field"> 
     <%= f.text_field :title, placeholder: "Write the article's title..." %> 
    <%= f.text_area :content, placeholder: "Compose new article..." %> 
    </div> 
    <%= f.submit "Post", class: "btn btn-primary" %> 
    <span class="picture"> <%= f.file_field :picture, accept: 'image/jpeg,image/gif,image/png' %> </span> 
<% end %>

的file_field應該有從上述元素10px的利潤，因爲你可以從我選擇了風格看：

span.picture { 
    margin-top: 10px; 
    input { 
    border: 0; 
    } 
}

然而span元素帶班.picture重疊上面的按鈕，也忽略了風格，你可以從我在imgbox上傳的image看到。

含有形式的整個代碼是：

<div class="atp_articles_form"> 
    <strong> Write below any useful ATP piece of news </strong> 
    <section class="atp_article_form"> 
     <%= render 'shared/atp_article_form' %> 
    </section> 
</div>

的.atp_articles_form類具有30像素的頂部和底部填充。沒有其他風格。
我的應用程序的另一部分是使用上面的樣式，它的工作原理：具有類.picture的span元素的結果爲29px高，因爲包含的input元素保留在距按鈕10px以下的位置。相反，在這種情況下，具有.picture類的span元素的結果爲75px高，而包含的input元素的結果爲29px。我不懂爲什麼。

來源

2017-02-24 Asarluhi

A span是an inline element。我從你的描述的感覺，你想它像一個塊級元素（例如，榮耀你給它的10px的利潤率在這種情況下，你應該添加display: block;你的CSS代碼，e.g：

span.picture { 
    display: block; // this makes it a block-level element 
    margin-top: 10px; 
    input { 
    border: 0; 
    } 
}

來源

2017-02-24 11:40:33

跨度元素上傳圖片重疊上面的按鈕

回答

相關問題