Question

我的页面顶部有一个标题，并在整个屏幕上显示。它被渲染为部分轨道。只要页面正文中有任何内容，标题就会被拉下来，不再触及页面顶部。我似乎无法弄清楚造成这种情况的原因。当页面正文中没有任何内容时，它可以正常工作。

这是css

html{
  padding: 0;
  margin: 0;
}

body{
    background-color: #Dee0D5;
  margin:0;
  padding: 0;
}
#navwrap{
 width: 800px;
  margin: 0 auto;
  padding: 0; 
}
#nav {
    width: 100%;
  height:50px;
    float: left;
    padding: none;
    background-color: #859797;
  margin: 0 0 10px 0;
    box-shadow: 0 0 5px #999999;


    ul{
       list-style: none;

       li{
        display:inline;
        float:left;
        padding: 10px;
        font-family: sans-serif;
       }
    }
}


#wrapper {

    width: 700px;
    margin: 0 auto;
    text-align: left;
    height:auto;
}

#footer{
    width: 100%;
    float: left;
    padding: 0;
    margin: 0 0 0 1em;
    border-top: 1px solid #999999;
       li{
        display:inline;
        list-style-type:none;
        float:left;
        padding: 10px;
        font-family: sans-serif;
       }

}

这是应用程序html：

<!DOCTYPE html>
<html>
<head>
  <title>Blog</title>
  <%= stylesheet_link_tag    "application", :media => "all" %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>

</head>
<body>
<%= render 'layouts/header' %>
<div id='wrapper'>

<%= yield %>

<%= render 'layouts/footer' %>
</div>
</body>
</html>

这是标题html：

<div id="nav">
    <div id='navwrap'>
    <ul id='nav-list'>
    <li><%= link_to 'Home', root_path %></li>
    <li><%= link_to 'About', '#' %></li>
    <li><%= link_to 'Projects', '#' %></li>
    <li><%= link_to 'Blog', '#' %></li>
</ul>
</div>
</div>

我确信我只是在忽略一些简单的东西，但它让我疯狂！

Answer 1

padding: none;不是padding属性的有效值。

尝试padding:0而不是

body{
    background-color: #Dee0D5;
    margin:0;
    padding:0;
}

Answer 2

将填充顶部设置为-5px？我相信5px是默认的保证金。

Answer 3

我认为你的<ul>元素可能有默认的边距和/或填充，如果我没记错的话 - 试着让它有边距：0; 此外，您的<li> CSS规则似乎嵌套在<ul>样式规则中。

标题没有触及屏幕顶部

3 个答案: