0

我在屏幕顶部的页面上有一个标题，并延伸到整个屏幕。它被渲染为一个 rails 部分。每当页面正文中有任何内容时，标题都会被拉下并且不再接触页面顶部。我似乎无法弄清楚是什么原因造成的。当页面正文中没有任何内容时，它可以正常工作。

这是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>

我确定我只是忽略了一些简单的事情，但这让我发疯了！

4

3 回答 3

0

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

尝试padding:0代替它

body{
    background-color: #Dee0D5;
    margin:0;
    padding:0;
}
于 2013-04-24T23:43:21.670 回答
0

将 padding-top 设置为 -5px？我相信 5px 是默认边距。

于 2013-04-24T23:49:51.327 回答
0

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

于 2013-04-24T23:55:29.453 回答