Question

我创建了一篇撰写文章的表格。
该表单由标题的text_field，内容的text_area，提交表单的按钮和上传图像的file_field组成。 Belows是代码：

<%= 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的{{1}}元素与上面的按钮重叠，也忽略了样式，正如我在imgbox上传的image所看到的那样。

包含表单的整个代码是：

.picture

<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>类有30px的顶部和底部填充。没有其他风格。
我的应用程序的另一部分是使用上面的样式，它起作用：类.atp_articles_form的span元素作为包含的.picture元素产生29px高，因为它位于距离按钮10px以下的位置。相反，在这种情况下，类input的span元素的结果为75px，而包含的.picture元素的结果为29px。我不懂为什么。

Answer 1

span为an inline element。我从你的描述中得到的感觉是你希望它表现得像块级元素（例如你给它的10px余量。在这种情况下你应该在你的CSS代码中添加display: block;，例如：

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

用于上传按钮

1 个答案: