li href，社交媒体图标不起作用

Question

我一直面临着一个大问题。我不知道为什么我不能解决这个问题。问题是我为我的网站制作了页脚并添加了一些 li 元素和社交媒体图标..但这没有 working.please 帮助。

这里的 li 元素 "About"、"Media"、"feedback"、"privacy policy" 不起作用。 4 个社交媒体图标也不起作用。下面是我的 html 和 css 代码：-

footer
{
width: 100%;
background-color: #2d2d2d;
padding: 20px 0px;
 height: 150px;
}
footer h2 {
    font-size: 16px;
    color: #a1a1a1;
    text-transform: uppercase;
 margin-top: 10px;
    margin-bottom: 40px;
 margin-left: 20px;
 

 
}
h2 {
    font-size: 20px;
 font-family: 'Gothic-Bold';
    font-weight: normal;
 position:sticky;
 margin-bottom: 40px;
 padding-top: 20px;
}


* {
    padding: 0px;
    margin: 0px;
}

.ft-quick-links
{
 float:left;
 width:400px;
}
.ft-quick-links ul li{
 float:left;
 margin-right:6px;
 margin-bottom:20px;
 margin-left: 5px;
 list-style: none;
 padding-right: 5px;
 padding-top: 20px;
 
 
}
.ft-quick-links li a{
 padding: 8px 15px;
 font-size: 13px;
 color: #959595;
 background:#202020 ;
 text-decoration: none;
 margin-bottom: 30px;
}
.ft-quick-links li a:hover{
 background:#171717;
}
.footer-btm-wrapp{
 width:100%;
 display:table;
 background:#1b1b1b;
}
.ft-btm-left {
 float:left;
}
.ft-btm-left ul li{
 float:left;
 margin-right:40px;
}
.ft-btm-left ul li a{
 font-size:12px;
 color:#5f5f5f;
}
.ft-btm-left ul li a:hover{
 text-decoration:none;
}
.footer-btm-wrapp .wrapper{
 padding:20px 0px;
}
.ft-social ul li{
 float: right;
 padding-right: 20px;
 padding-top: 100px;
 list-style: none;

  
}
.footer-btm-wrapp .wrapper{
 padding:8px 0px;
 list-style: none;
}


.copy-rights p{
 color:#959595;
 font-size:13px;
 list-style: none;
 margin-top: -40px;
 padding: 60px 20px 10px;
 float:right 10px;
 text-align:right;
 list-style: none;
 
 
 
}
.wrapper{
 width:1100px;
 margin:0px auto;
 position:relative;
}

.ft-lines{
    font-size: 12px;
    margin-top: 110px; 
    
}

.ft-lines li {
    list-style: none; 
    display: inline; 
    margin: 0 10px 0 10px;
}

.ft-lines a {
    text-decoration: none;
    color: #959595;
}

.ft-lines a:hover {
    text-decoration: underline;
}

<!DOCTYPE html>
<html>
<body>
 <link rel="stylesheet"type="text/css" href="footer.css">
<footer>
 
 <div class="wrapper">
 <div class="ft-quick-links">
  <h2>Quick Links</h2>
  <ul class="clearfix">
   <li><a href="#">About</a></li>
   <li><a href="#">Media</a></li>
   <li><a href="#">Feedback</a></li>
   <li><a href="#">Privacy policy</a></li>
   </ul>
  </div>
 </div>
  <div class="wrapper">
  <div class="ft-social">
      <ul class="clearfix">  
       
   
   <li><a href="http://www.youtube.com"><img src="images/yt.png"/></a></li>
   <li><a href="http://www.instagram.com"><img src="images/ig.png"/></a></li>
   <li><a href="http://www.twitter.com"><img src="images/twit.png" /></a></li>
   <li><a href="http://www.facebook.com"><img src="images/fb.png" /></a></li>
 
   </ul>
  </div>
  </div>
   <div class="wrapper">
   <div class="ft-lines">
   <ul class="clearfix">
    <li><a href="#">Terms of Use</a></li>
    <li><a href="#">Content Guidelines</a></li>
    <li><a href="#">Report error </a></li>
    </ul> 
    <div class="copy-rights"><p> ©  2017 Rodeo labs. All rights reserved</p>
   </div>
 </div>
 </div>
 </footer>
 
 </body>
</html>

Answer 1

您在包装器 class 中使用相对位置有什么具体原因吗？此外，您已将包装器 classes 的宽度设置为 1100px，这可能不正确。我更改了包装器 class 中的 CSS，输出似乎与您想要的一样。

.wrapper{
    width: 100%;
    margin:0px auto;
}

如您所见，我删除了 position: relative 并将宽度更改为 100%。此外，您在 body 标签中包含了 CSS 导入标签。它应该在 head 标签内。希望这对你有帮助。

li href，社交媒体图标不起作用

li ahref, social media icons doesnt working

html

css

href

footer

html-lists