我的 <ul>
遇到问题<li>
标签,我不确定问题是否真的出在这些类中。
当我执行这段代码时,“菜单”div 被从父“header”div 向下推约 10px。 (奇怪的附加信息:当我在我的“菜单”div 上放置边框时,它不会将其向下推)
这是我的代码供您查看:
HTML 代码:
<div class="background"></div>
<div class="page">
<div class="header">
<div class="headerLogo"><img src="images/logo.png" style="margin-top:42px;"></div>
</div>
<div class="menu">
<div class="menuContainer">
<ul id="nav">
<li class="forside"><a href="?p=hjem">Forside</a></li>
</ul>
</div>
</div>
<div class="content">
</div>
<div class="footer">
</div>
</div>
CSS 代码:
html, body {
height:100%;
margin:0;
padding:0;
}
img {
border: none;
}
textarea{
resize: none;
}
.background {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color: #e6e6e6;
background-image: url('images/bg.png');
}
.page {
position:relative;
z-index:1;
}
.header {
position:relative;
height:192px;
width: 100%;
background: url(images/header.png) 0 0 repeat-x;
}
.headerLogo{
position:relative;
margin:0px auto;
width:475px;
}
.menu {
position:relative;
height: 31px;
width: 100%;
background: url(images/menubg.png) 0 0 repeat-x;
}
.menuContainer {
position:relative;
width: 850px;
margin:0px auto;
height:25px;
}
.content {
position:relative;
width:850px;
height: auto;
margin: 0 auto;
min-height:450px;
background: url(images/content.png) 0 0 repeat-y;
}
.footer {
position:relative;
width: 100%;
height: 141px;
background: url(images/footer.png) 0 0 repeat-x;
}
// Menu
ul#nav {
list-style: none inside;
}
ul#nav li {
display: inline;
}
ul#nav li a {
display: block;
height: 25px;
text-indent: -9999px;
float: left;
}
ul#nav li.forside a{
width:80px;
background: url(images/menu/forside.png) top center no-repeat;
}
ul#nav li a:hover {
background-position: bottom center;
}
ul#nav li.forside2 a{
width:80px;
background: url(images/menu/forside.png) bottom center no-repeat;
}
最佳答案
我想你添加下面的样式,然后你执行。
ul
{
margin:0px;
}
关于css - <ul> 和 <li> 将 <div> 向下推,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12330441/