跨度元素上传图片重叠上面的按钮

我创建了一个写文章的表单。
该表格由标题的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

跨度元素上传图片重叠上面的按钮

回答

相关问题