时间戳

首页 > 解决方案 > 为什么div命名框在页脚上方？为什么页脚下面会有那么多额外的空白？

html - 为什么div命名框在页脚上方？为什么页脚下面会有那么多额外的空白？

问题描述

我的意思是关于带有类 box 的 div，它应该是 box1 和 box2 的容器，但它在下面，就在页脚上方。另外，如果您认为我可以更好/更有效地确定事情，告诉我也会很有帮助（例如，不需要某些 div，另一种方法会更好地定位元素，代码可以更简洁等。 ） 非常感谢。

HTML 代码（为简单起见，此处未复制标题和标题）：

<body>
  
    <main>
        <section class="introduction">
            <div class="container-intro">
        <h1 class="header1">The Future Is Here</h1>
            </div>
                <div class="boxes"> 
                    <div class="box1"><a href="#">Sign Up</a></div>
                    <div class="box2"><a href="#">Sign In</a></div>
                </div>
        </section>
    </main>
    
    <footer>
       <ul class="smedia-icons">
        <li><i class="fab fa-twitter-square"></i></li>
        <li><i class="fab fa-facebook"></i></li>
        <li><i class="fab fa-whatsapp-square"></i></li>
        <li><i class="fab fa-instagram-square"></i></li>
       </ul>

    </footer>
    
</body>
</html>

CSS：

   *{
    font-family: 'Orbitron', sans-serif;
    margin: 0px;
    color: white;
}

main{
background: linear-gradient(#ff416c, #ff4b2b);
margin-top: 0px;
}
.header1{
text-align: center;
padding: 270px;
color: white;
font-size: 90px;
}
footer{
  background-color: black;
  color: white;
  padding: 50px;
  position: relative;
  height: 100%;
}
.smedia-icons li{
  display: inline-block;
  list-style: none;
  font-size: 40px;
  margin: 10px;
  position: relative; top: 950px;
  
}
.boxes{
 text-align: center;
 display: flex;
 justify-content: center;
 font-size: medium;
 font-weight: bolder;

}

.box1{
  height: 30px ;
  width: 150px ;
  padding: 10px ;
  border: ;
  border-radius: 40px;
  background-color: black;
  margin: 0 auto;
  position: relative; top: -200px; left: 200px;

}
.box2{
  height: 30px ;
  width: 150px ;
  padding: 10px ;
  border: ;
  border-radius: 40px;
  background-color: black;
  margin: 0 auto;
  position: relative; top: -200px; left: -200px;

}
.box1:hover, .box2:hover{
  background-color: chartreuse;
}

标签： htmlcss

解决方案

代码笔： https ://codepen.io/larrytherabbit/pen/NWNYNoj

对代码的唯一编辑是删除<li></li>标签并在 .smediaicons div 内使用 flex 显示，社交媒体图标的左右边距为 15px。我还使用了 45px 的字体大小。

HTML

<body>
  <main>
    <section class="introduction">
      <div class="container-intro">
        <h1 class="header1">The Future Is Here</h1>
      </div>
      <div class="boxes">
        <div class="box1">
          <a href="#">Sign Up</a>
        </div>
        <div class="box2">
          <a href="#">Sign In</a>
        </div>
      </div>
    </section>
  </main>
  <footer>
    <div class="smedia-icons">
        <i class="fab fa-twitter-square"></i>
        <i class="fab fa-facebook"></i>
        <i class="fab fa-whatsapp-square"></i>
        <i class="fab fa-instagram-square"></i>
      </div>
  </footer>
</body>

CSS

  *{
    font-family: 'Orbitron', sans-serif;
    margin: 0px;
    color: white;
}

main{
background: linear-gradient(#ff416c, #ff4b2b);
margin-top: 0px;
}

.smedia-icons {
  display:flex;justify-content:center;
}
.header1{
text-align: center;
padding: 270px;
color: white;
font-size: 90px;
}
footer{
  background-color: black;
  color: white;
  padding: 50px;
  position: relative;
  height: 100%;
}
.smedia-icons i{
font-size:45px;
  margin:0 15px;
 
}
.boxes{
 text-align: center;
 display: flex;
 justify-content: center;
 font-size: medium;
 font-weight: bolder;

}

.box1{
  height: 30px ;
  width: 150px ;
  padding: 10px ;
  border: ;
  border-radius: 40px;
  background-color: black;
  margin: 0 auto;
  position: relative; top: -200px; left: 200px;

}
.box2{
  height: 30px ;
  width: 150px ;
  padding: 10px ;
  border: ;
  border-radius: 40px;
  background-color: black;
  margin: 0 auto;
  position: relative; top: -200px; left: -200px;

}
.box1:hover, .box2:hover{
  background-color: chartreuse;
}

推荐阅读