8

这是一个 Ruby on Rails 应用程序,我无法在页面顶部获取正文。截屏:截屏

我不知道为什么会发生这种情况,因为我已经正确设置了所有属性。这是整个应用程序的来源。 我的观点:

<div id="header-wrap">
  <div id="header">
    <h1>Blog</h1>
  </div>
</div>

<div id="wrapper">
  <div id="posts">
    <% @posts.each do|post| %>
    <div id="post">
      <h2><%= post.title %></h2>
      <%= simple_format post.body %>
      <small>
        <%= link_to 'Edit', edit_post_path(post) %> |
        <%= link_to 'Destroy', post, method: :delete, data: { confirm: 'Are you sure?' } %>
      </small>
    </div>
    <% end %>
  </div>

  <br>

  <%= link_to 'New Post', new_post_path %>
</div>

我的 CSS(注释掉的 CSS 是我编写的通过更改 header-wrap 和 wrapper 元素的定位来解决问题的 hack):

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require_self
 *= require_tree .
 *= require twitter/bootstrap
 */
 html, body, {
    background-image:url('bg.png');
    background-color:#cccccc;
    padding: 0;
    margin: 0;
}

#header-wrap {
    background-color: #424242;
/*  position: absolute;*/
    height: 100px;
    width: 100%;
  top: 0;
}

#header {
  margin: 0 auto;
    color: #FFFFFF;
    width: 588px;
}

#wrapper {
/*  position: relative;
  top: 100px;*/
    padding: 0 6px;
    margin: 0 auto;
    width: 588px;
}

#posts {
}

#notice {
  color: green;
}

.field_with_errors {
  padding: 2px;
  background-color: red;
  display: table;
}

#error_explanation {
  width: 450px;
  border: 2px solid red;
  padding: 7px;
  padding-bottom: 0;
  margin-bottom: 20px;
  background-color: #f0f0f0;
  h2 {
    text-align: left;
    font-weight: bold;
    padding: 5px 5px 5px 15px;
    font-size: 12px;
    margin: -7px;
    margin-bottom: 0px;
    background-color: #c00;
    color: #fff;
  }
  ul li {
    font-size: 12px;
    list-style: square;
  }
}
4

4 回答 4

13

请检查您的标题标签。运行您的代码删除<h1>Blog</h1>.

并添加

h1{
     margin: 0;
  }

但保持<h1>Blog</h1>

已编辑

#header-wrap{ position:absolute;}这是因为你#header在里面#header-wrap并移除

h1{
         margin: 0;
      }
于 2013-09-29T16:14:04.227 回答
0

为避免将来出现更多 CSS 问题,请将此“重置 CSS”添加到样式表的顶部。
重置 CSS

于 2013-09-29T16:28:44.413 回答
0

然后添加*{margin:0}正文将从 0 开始

于 2018-06-27T12:13:02.427 回答
0

对我来说,问题是正文中有两个警告段落。

<p class="notice"><%= notice %></p>

将 p 更改为部分。

于 2019-08-02T00:23:25.947 回答