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

Question

我使用绝对元素制作了页脚，我创建了 3 组链接，它们彼此重叠。 我的问题是当屏幕尺寸下降时，它们会搞砸，右侧组消失了。 我正在尝试使用弹性... 我对主页的其余部分做了同样的事情，它奏效了。 如果您想查看页面，freecodewiki.com 页面。

我也尝试了浮动方法，但情况更糟。

* {
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！

您使用了错误的方法，例如padding来创建 由于布局搞砸了，项目之间的空间我更新了代码 下面 在子元素上使用margin请查看

* {
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>

Answer 2

使用bootstrap grid并从css中删除padding-left: 350px

* {
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
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="footer container">
<hr>
<footer>
<p>FreeCodeWiki.com &copy; 2020, all right reserved </p>
<div class="row">
<div class="footerbox1 col-sm-3">
<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 col-sm-3">
<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 col-sm-3">
<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>