我在屏幕顶部的页面上有一个标题,并延伸到整个屏幕。它被渲染为一个 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>
我确定我只是忽略了一些简单的事情,但这让我发疯了!