Question

我的html文档中的内容与我的导航栏重叠。

我尝试在css中为.main-nav添加边距，但它没有用。

示例代码有＆＃34; Hello World＆＃34;在我的导航栏上。我希望有一个新的部分从主导航栏正下方开始，而不使用

＆＃13;

.main-nav{
  float:right;
  list-style: none;
  margin-top: 25px;
  margin-bottom: 50px;
}

.main-nav li{
  display: inline-block;
  margin-left: 15px;
}

.section-test{
    margin-top: 200px;
}

＆＃13;

<body>
    <nav>
      <div class="row">
      <img src="{% static 'resources/img/logo-transparent.png' %}" class="logo" alt=" Logo">
      <ul class="main-nav">
        <li><a href="#">About</a></li>
        <li><a href="#">Log In</a></li>
        <li><a href="#">Get a Demo</a></li>
      </ul>
      </div>
    </nav>

   <section class="section-test">
    <h3>hello world</h3>
   </section>
</body>

＆＃13;

Answer 1

在部分测试类

上使用clear:both;

＆＃13;

/* Styles go here */

.main-nav{
  float:right;
  list-style: none;
  margin-top: 25px;
  margin-bottom: 50px;
}

.main-nav li{
  display: inline-block;
  margin-left: 15px;
}

.section-test{
  clear: both;
}

＆＃13;

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <nav>
        <div class="row">
        <img src="{% static 'resources/img/logo-transparent.png' %}" class="logo" alt=" Logo">
        <ul class="main-nav">
          <li><a href="#">About</a></li>
          <li><a href="#">Log In</a></li>
          <li><a href="#">Get a Demo</a></li>
        </ul>
        </div>
      </nav>

     <section class="section-test">
      <h3>hello world</h3>
     </section>
  </body>

</html>

＆＃13;

Answer 2

当您在float: right元素上使用nav时，它已不在流程中。这意味着nav家长并未将其高度考虑在内。

这里有多个解决方案。第一个是将overflow:hidden应用于nav元素以强制它增长，使用Punith Jain提到的清晰元素，或者使用flexbox简化标记并摆脱浮动！ / p>

＆＃13;

.row {
  display: flex;
}

.main-nav{
  text-align: right;
  flex: 1;
}

.main-nav li{
  display: inline-block;
  margin-left: 15px;
}

＆＃13;

<nav>
  <div class="row">
    <img src="{% static 'resources/img/logo-transparent.png' %}" class="logo" alt=" Logo">
    <ul class="main-nav">
      <li><a href="#">About</a></li>
      <li><a href="#">Log In</a></li>
      <li><a href="#">Get a Demo</a></li>
    </ul>
  </div>
</nav>

<section>
  <h3>hello world</h3>
</section>

＆＃13;

html内容重叠导航栏

2 个答案: