css - (HTML CSS) 尝试使页脚链接居中

Question

我制作了页脚，使用绝对元素，我创建了 3 组链接，它们相互重叠。我的问题是当屏幕尺寸变小时，它们会乱七八糟，右侧组也不见了。我正在尝试使用 flex ...我对主页的其余部分做了同样的事情并且它起作用了。freecodewiki.com 是您想要查看的页面。

我也试过 float 方法，但更糟糕。

* {
  box-sizing: border-box;
}

#footer {
  display: flex;
  width: 100%;
  flex-flow: row wrap;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(to bottom, #3781a4 0%, #4eb5e5 100%);
  color: black;
  text-align: center;
  background: linear-gradient(to bottom, #3781a4 0%, #4eb5e5 100%);
  color: black;
  transition: all 0.9s;
  left: 0;
  bottom: 0;
  width: relative;
}

.footer {
  height: relative;
  background: linear-gradient(to bottom, #3781a4 0%, #4eb5e5 100%);
  color: black;
}

.footer p {
  text-align: center;
  position: relative;
}

.footer a {
  display: block;
  padding-left: 350px;
  position: relative;
}

.webdeveloper {
  color: black;
}

.footerbox2 a {
  position: relative;
}

.footerbox1 a {
  position: relative;
}

.footerbox3 a {
  position: relative;
}

.footerbox2 h3 {
  padding-left: 350px;
  position: relative;
}

.footerbox1 h3 {
  padding-left: 350px;
  position: relative;
}

.footerbox3 h3 {
  position: relative;
  padding-left: 350px;
}

.footerbox {
  display: flex;
  align-items: center;
  padding-top: 20px;
}

.hr2 {
  border-top: 0.1px #d8e3f5
}

<div class="footer">
  <hr>
  <footer>
    <p>FreeCodeWiki.com &copy; 2020, all right reserved </p>

    <div class="footerbox">

      <div class="footerbox1">
        <h3>Learn programming</h3>

        <a href="howtomain/howto_default.php" class="webdeveloper" title="how to learn programming">how to collection</a>
        <a href="html/html_default.php" class="webdeveloper" title="html course">learn html free</a>
        <a href="javascript/js_intro.php" class="webdeveloper" title="Javascript course">learn Javascript free</a>
        <a href="python/python_intro.php" class="webdeveloper" title="how to learn python">learn Python free</a>
      </div>
      <div class="footerbox2">
        <h3>About</h3>
        <a href="contactus/contactus.php" class="webdeveloper" title="Contact us">Contact us</a>
        <a href="reportbug/reportbug.php" class="webdeveloper" title="Report bug">Report bug</a>
        <a href="about/about.php" class="webdeveloper" title="about us">About us</a>
        <a href="tryyourselfcodes/howto_howto_social_button.php" class="webdeveloper" title="about us">Check our live code editor</a>

      </div>

      <div class="footerbox3">
        <h3>Web development courses</h3>

        <a href="howtomain/howto_social_button.php" class="webdeveloper" title="how to create buttons">Create buttons</a>
        <a href="howtomain/howto_menu_sidebar.php" class="webdeveloper" title="how to create sidebar">Create sidebar menu</a>
        <a href="html/html_editors.php" class="webdeveloper" title="html editors">HTML Editors</a>
        <a href="javascript/js_concepts.php" class="webdeveloper" title="javascript concepts">Learn javascript concepts</a>


      </div>
    </div>
    <br>

  </footer>
</div>

Answer 1

欢迎来到 SO!

You are using wrong approach like padding to create space between item due to which layout messed up I updated the code below Using margin on child elements please have a look

* {
  box-sizing: border-box;
}

#footer {
  display: flex;
  width: 100%;
  flex-flow: row wrap;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(to bottom, #3781a4 0%, #4eb5e5 100%);
  color: black;
  text-align: center;
  background: linear-gradient(to bottom, #3781a4 0%, #4eb5e5 100%);
  color: black;
  transition: all 0.9s;
  left: 0;
  bottom: 0;
  width: relative;
}

.footer {
  height: relative;
  background: linear-gradient(to bottom, #3781a4 0%, #4eb5e5 100%);
  color: black;
}

.footer p {
  text-align: center;
  position: relative;
}

.footer a {
  display: block;
  
  position: relative;
}

.webdeveloper {
  color: black;
}

.footerbox2 a {
  position: relative;
}

.footerbox1 a {
  position: relative;
}

.footerbox3 a {
  position: relative;
}

.footerbox2 h3 {
  
  position: relative;
}

.footerbox1 h3 {
  
  position: relative;
}

.footerbox3 h3 {
  position: relative;
  
}

.footerbox {
  display: flex;
  align-items: center;
  padding-top: 20px;
}
.footerbox > div {
 flex:1 1 auto;
  text-align:center;

  margin:5px;
}


.hr2 {
  border-top: 0.1px #d8e3f5
}

<div class="footer">
  <hr>
  <footer>
    <p>FreeCodeWiki.com &copy; 2020, all right reserved </p>

    <div class="footerbox">

      <div class="footerbox1">
        <h3>Learn programming</h3>

        <a href="howtomain/howto_default.php" class="webdeveloper" title="how to learn programming">how to collection</a>
        <a href="html/html_default.php" class="webdeveloper" title="html course">learn html free</a>
        <a href="javascript/js_intro.php" class="webdeveloper" title="Javascript course">learn Javascript free</a>
        <a href="python/python_intro.php" class="webdeveloper" title="how to learn python">learn Python free</a>
      </div>
      <div class="footerbox2">
        <h3>About</h3>
        <a href="contactus/contactus.php" class="webdeveloper" title="Contact us">Contact us</a>
        <a href="reportbug/reportbug.php" class="webdeveloper" title="Report bug">Report bug</a>
        <a href="about/about.php" class="webdeveloper" title="about us">About us</a>
        <a href="tryyourselfcodes/howto_howto_social_button.php" class="webdeveloper" title="about us">Check our live code editor</a>

      </div>

      <div class="footerbox3">
        <h3>Web development courses</h3>

        <a href="howtomain/howto_social_button.php" class="webdeveloper" title="how to create buttons">Create buttons</a>
        <a href="howtomain/howto_menu_sidebar.php" class="webdeveloper" title="how to create sidebar">Create sidebar menu</a>
        <a href="html/html_editors.php" class="webdeveloper" title="html editors">HTML Editors</a>
        <a href="javascript/js_concepts.php" class="webdeveloper" title="javascript concepts">Learn javascript concepts</a>


      </div>
    </div>
    <br>

  </footer>
</div>