【发布时间】:2017-12-11 20:46:29
【问题描述】:
在我的网页中,div 之间存在未知间隙,并且导航栏顶部有一个空白区域。我已经将body的margin和padding设置为0,但问题依旧存在。
我知道有a similar post,但我认为该帖子中没有提到任何解决方案。另外,如您所见,我在负值中添加了 margin-top 以消除导航栏上的未知空间,但这是一种低效的方法。
谁能帮我解决这个问题?
代码如下:
html {
background: url(images/bg.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
margin: 0;
border: 0;
padding: 0;
}
header {
margin-top: -17px;
background: #007400;
}
#header_inner {
width: 90%;
margin: 0 auto;
font-weight: 300;
}
header::after {
content: "";
display: table;
clear: both;
}
.menu {
float: right;
color: #eeeeee;
text-decoration: none;
text-transform: uppercase;
font-size: 15px;
}
.header2 {
margin: 0;
padding: 0;
list-style: none;
}
.header2 li {
display: inline-block;
margin-left: 40px;
padding-top: 23px;
position: relative;
}
nav a:hover {
color: #fff;
}
nav a:before {
content: "";
display: block;
height: 5px;
background-color: #fff;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 200ms;
}
nav a:hover::before {
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<link href="css/jquery.bxslider.css" rel="stylesheet" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<title>Home Page</title>
</head>
<body>
<header>
<div id="header_inner">
<a href="home_page.html"></a>
<nav class="menu">
<a href="#" id="menu_icon"></a>
<ul class="header2">
<li><a href="home_page.html" class="current">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Career</a></li>
<li><a href="#">Logout</a></li>
</ul>
</nav>
</div>
</header>
<p>hello</p>
</body>
</html>
【问题讨论】:
-
你必须添加你的 CSS 这没有意义!
-
覆盖浏览器默认的
ul样式。 -
添加了完整的 CSS @MhdAlaaAlhaj
-
检查您发布的代码,没有空格。因此尝试添加所有影响 CSS。