正如标题所说。我似乎无法让我的导航菜单尊重我在CSS中设置的边距规则。是“浮动：离开;”财产导致利润率问题？
我对HTML / CSS的了解非常有限，因此非常感谢任何帮助。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="description of the webpage">
<meta name="keywords" content="keywords for the webpage">
<meta name="author" content="your name and/or email here">
<title>First Webpage</title>
<style>
body {
background-color: #2b2b2b;
font-family: ‘Arial Black’, Gadget, sans-serif;
font-style: normal;
font-size: 12px;
}
/*------------------------------------NAV MENU---------------------------------------*/
nav ul {
font-size: 20px;
font-style: normal;
font-family: ‘Arial Black’, Gadget, sans-serif;
font-weight: bold;
position: fixed;
top: 0;
width: 100%;
list-style-type: none;
margin-left: 35px;
margin-bottom: 100px;
padding: 0;
overflow: hidden;
background-color: #C63D0F;
border-style: solid;
border-size: 8px;
border-color: #7E8F7C;
border-radius: 5px;
}
nav li {
border-right: 4px solid #7E8F7C;
float: left;
}
nav li a {
display: block;
color: #FDF3E7;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav li a:hover {
background-color: #3B3738;
}
/*------------------------------------NAV MENU---------------------------------------*/
.education,
.revlevant_work,
.professional_experience,
.skills,
.activities {
background-color: #3B3738;
color: #FDF3E7;
margin: 35px;
padding: 15px;
border-style: solid;
border-width: 8px;
border-color: #7E8F7C;
border-radius: 15px;
}
</style>
</head>
<body>
<div id="main_content">
<nav>
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">Video Gallery</a>
</li>
<li><a href="#">Image Gallery</a>
</li>
<li><a href="#">Personal</a>
</li>
<li><a href="#">Contact</a>
</li>
</ul>
</nav>
<div>
<div class="education">
<h1>Education</h1>
<ul>
<li>
<p>Ajax High School 2010 - 2014</p>
</li>
<li>
<p>Garduated in 2014 from <b>Ajax High School</b> with a Ontario Secondary School Diploma.</p>
</li>
<li>
<p>George Brown College 2016 - Current</p>
</li>
<li>
<p>Currently enrolled in Computer Systems Technology (T147) at <b>George Brown College.</b>
</p>
</li>
</ul>
</div>
<div class="revlevant_work">
<h1>Relevant Course Work</h1>
<ul>
<li>
<p>
</ul>
</div>
<div class="professional_experience">
<h1>Professional experience</h1>
<ul>
<li>
<p>Salvation Army Thrift Store</p>
</li>
<li>
<p>Aspect Logistics</p>
</li>
<li>
<p>All Maintenance Contractors</p>
</li>
<li>
<p>Canadian Tire</p>
</li>
</ul>
</div>
<div class="skills">
<h1>Skills</h1>
<ul>
<li>
<p>Understanding of Computer Systems and the Operation of Software</p>
</li>
<li>
<p>Communication Skills</p>
</li>
<li>
<p>Adaptability/Flexibility</p>
</li>
<li>
<p>Leadership/Management Skills</p>
</li>
</ul>
</div>
<div class="activities">
<h1>Activities</h1>
<ul>
<li>
<p>Reading</p>
</li>
<li>
<p>Video Games</p>
</li>
<li>
<p>Art/Concept Art</p>
</li>
</ul>
</div>
</div>
<footer>
<!-- edit/no content -->
</footer>
</div>
</body>
</html>
答案 0 :(得分：0)
如果position属性的值与默认值static不同，则该元素将从正常文档流中删除。
完成此操作后，边距不再影响文档流。这就是为什么这些元素没有“被推倒”的原因。我建议阅读like this..。
代码段：
* {
box-sizing: border-box;
}
body {
background-color: #2b2b2b;
font-family: ‘Arial Black’, Gadget, sans-serif;
font-style: normal;
font-size: 12px;
margin: 0;
}
main,
[role="main"] {
margin-top: 100px;
}
/*------------------------------------NAV MENU---------------------------------------*/
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #2b2b2b;
}
nav {
margin-left: 35px;
margin-right: 35px;
}
nav ul {
font-size: 20px;
font-style: normal;
font-family: ‘Arial Black’, Gadget, sans-serif;
font-weight: bold;
list-style-type: none;
padding: 0;
overflow: hidden;
background-color: #C63D0F;
border-style: solid;
border-width: 8px;
border-color: #7E8F7C;
border-radius: 5px;
margin-bottom: 0;
}
nav li {
border-right: 4px solid #7E8F7C;
float: left;
}
nav li a {
display: block;
color: #FDF3E7;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav li a:hover {
background-color: #3B3738;
}
/*------------------------------------NAV MENU---------------------------------------*/
.education,
.revlevant_work,
.professional_experience,
.skills,
.activities {
background-color: #3B3738;
color: #FDF3E7;
margin: 35px;
padding: 15px;
border-style: solid;
border-width: 8px;
border-color: #7E8F7C;
border-radius: 15px;
}<header>
<nav>
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">Video Gallery</a>
</li>
<li><a href="#">Image Gallery</a>
</li>
<li><a href="#">Personal</a>
</li>
<li><a href="#">Contact</a>
</li>
</ul>
</nav>
</header>
<main id="main_content" role="main">
<section class="container">
<div class="education">
<h1>Education</h1>
<ul>
<li>
<p>Ajax High School 2010 - 2014</p>
</li>
<li>
<p>Garduated in 2014 from <b>Ajax High School</b> with a Ontario Secondary School Diploma.</p>
</li>
<li>
<p>George Brown College 2016 - Current</p>
</li>
<li>
<p>Currently enrolled in Computer Systems Technology (T147) at <b>George Brown College.</b>
</p>
</li>
</ul>
</div>
<div class="revlevant_work">
<h1>Relevant Course Work</h1>
<ul>
<li>
<p></p>
</ul>
</div>
<div class="professional_experience">
<h1>Professional experience</h1>
<ul>
<li>
<p>Salvation Army Thrift Store</p>
</li>
<li>
<p>Aspect Logistics</p>
</li>
<li>
<p>All Maintenance Contractors</p>
</li>
<li>
<p>Canadian Tire</p>
</li>
</ul>
</div>
<div class="skills">
<h1>Skills</h1>
<ul>
<li>
<p>Understanding of Computer Systems and the Operation of Software</p>
</li>
<li>
<p>Communication Skills</p>
</li>
<li>
<p>Adaptability/Flexibility</p>
</li>
<li>
<p>Leadership/Management Skills</p>
</li>
</ul>
</div>
<div class="activities">
<h1>Activities</h1>
<ul>
<li>
<p>Reading</p>
</li>
<li>
<p>Video Games</p>
</li>
<li>
<p>Art/Concept Art</p>
</li>
</ul>
</div>
</section>
</main>
<footer>
<!-- edit/no content -->
</footer>
请务必阅读语义HTML，在演示中更改了一些元素标签，以指导您正确的方向。以下是一些this。