为什么我的导航菜单不会尊重CSS边距属性？

时间：2016-10-28 17:01:08

标签： html css

正如标题所说。我似乎无法让我的导航菜单尊重我在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>

1 个答案:

答案 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。

相关问题
最新问题