我正在尝试构建一个导航栏,但是我在实现删除边距的解决方案时遇到了麻烦,但它只会从我的主页中删除它。
我已经尝试了这些建议,包括 this question 中评价最高的建议,但仍然没有。
CSS:
/**********************************
HEADING
**********************************/
header {
float: left;
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
background-color: #f00;
}
#logo {
text-align: center;
margin: 0;
}
/**************************
GENERAL
**************************/
body {
background-color: grey;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
/**********************************
NAVIGATION
**********************************/
nav {
text-align: center;
padding: 10px 0;
margin: 20px 0 0;
background-color: #fff;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AP World</title>
<meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.
">
<link rel="stylesheet" href="/css/main.css">
<link rel="canonical" href="http://yourdomain.com/">
</head>
<body>
<header>
<a href="" id="logo">
<h1>AP World</h1>
</a>
<nav>
<ul>
<li><a href="/index.html">Home</a>
</li>
<li><a href="/songs">Songs</a>
</li>
<li><a href="/virgins">Virgins</a>
</li>
</ul>
</nav>
</header>
<div class="page-content">
<div class="wrapper">
Homepage
</div>
</div>
</body>
</html>
Here is a link to my site. 和 link to a JSFiddle
我是网络开发的新手,所以非常感谢任何帮助! ^^
最佳答案
从您的 float:left
CSS 中删除 header
,它应该可以解决问题。当您 float 一个元素时,它会将其从 DOM 结构中取出,因此即使 H1
不是标题的一部分,您的 H1
标记的边距也被应用在标题上方。
关于html - 从页面中删除边距,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/30063178/