html - 使我的完全静态页脚响应并为移动设备堆叠而列表项不会消失

Question

对于这种情况的任何建议将不胜感激。

在针对移动设备进行缩放时， Logo 未居中。列表标题完美居中，但列表项消失了。此外，图标完全覆盖了版权横幅，而不是居中。

这是相关代码的 fiddle 。

.fcontainer {
    width: 1200px;
    margin: 0 auto;
    padding-top:30px;
}
.ffooter {
    width: 100%;
    float: left;
}
.col-1,
.col-2,
.col-3,
.col-4 {
    width: 25%;
    float: left;
}
.footer-copyright {
width:100%;
float: left;
}

@media screen and (max-width: 768px) {
  .fcontainer {
      width: 100%;
      margin: 0 auto;
  }
  .col-1,
  .col-2,
  .col-3,
  .col-4 {
    width: 100%;
    float: none;
  }
}
.fcopyright{
  padding-top:270px;
  color:#ffffff;
}

.quicklinkshead{
  font-size:1.5em;
  color:#ffffff;
  font-weight:bolder;
}

.serviceshead{
  font-size:1.5em;
  color:#ffffff;
  font-weight:bolder;
}

.referenceshead{
  font-size:1.5em;
  color:#ffffff;
  font-weight:bolder;
}

.services{
  list-style-type:none;
  margin: 15px 0 15px 0px;
  color: #ffffff;
}
.quicklinks{
  list-style-type:none;
  margin: 15px 0 15px 0px;
  color: #ffffff;
}
.references{
  list-style-type:none;
  margin: 15px 0 15px 0px;
  color: #ffffff;
}
.jaxchamber{
  margin:-115px 185px;
  float:right;
}
.napofoot{
  margin:-115px auto;
  float:right;
}

<footer>
	<div class="fcontainer">
	 <div class="ffooter">
	  <div class="col-1"><img src="images/logofooter.png"></div>
	  <div class="col-2"><p class="quicklinkshead">Quick Links</p>
		<ul class="quicklinks">
				<li>Home</li>
				<li>About</li>
				<li>Services</li>
				<li>Get Started</li>
		</ul>
		</div>
	  <div class="col-3"><p class="serviceshead">Services</p>
		<ul class="services">
				<li>Families</li>
				<li>Senior Cleaning</li>
				<li>Senior Downsizing</li>
				<li>Organizing Services</li>
		</ul></div>
	  <div class="col-4"><p class="referenceshead">References</p>
		<ul class="references">
				<li>Testimonials</li>
				<li>Before / After</li>
				<li>Policies</li>
				<li>Contact Us</li>
		</ul></div>
	 </div>
	 <p class="fcopyright">Copyright 2017 Blue Hydrangea Residential Cleaning & Organizing. All Rights Reserved.</p>
	 <img class="jaxchamber" src="images/jaxchamberfooter.png">
	 <img class="napofoot" src="images/napofooter.png">
	</div>
</footer>

Answer 1

将 text-align: center; 添加到 .ffooter 以使 Logo 居中。

关于图标和版权:首先，您需要从页脚中删除固定的高度并将background-size从100% 100% 到覆盖。同时从图标中删除 float 和负 margin。同时从 .fcopyright

中删除 padding-top

如果您希望版权位于图标下方 — 在 HTML 标记中将其放在图标之后