为我的页脚添加底部边框和图标

Question

我正在开发一个响应式页脚，我能够让一切正常工作。布局是有一个小问题的地方。我无法在每个 li 字段后获得底部边框，也无法在末尾获得图标。这是我到目前为止所做的。请让我知道我缺少什么。

    @media all and (max-width: 979px) {

    .brand-logos{
     margin: 0 auto !important;
     padding: 10px !important;
    }
    
    footer nav ul{
    
    display:block !important;
    margin: 0 auto !important;
    }
    
    footer nav ul li{
    display:inline-block;
    margin: 0 auto !important;
    padding: 0 !important;
    }
    
    footer nav ul li img{
    
    margin: 20px auto !important;
    width: 70% !important;
    display: block !important;
    
    }
    
    footer .footer-navigation .container-inline-css{
     width: 100% !important;
     padding:10px !important;
     margin:0 !important;
     border-bottom: 1px solid #77777A !important;
    }
    
    footer .footer-navigation .container-inline-css span{
     margin: 0 !important;
        padding: 0px !important;
        cursor: pointer !important;
    }
    
    footer .footer-navigation div.container-inline-css ul{
     max-height: 0 !important;
        overflow: hidden !important;
        padding: 0 20px !important;
    }
    
    footer .footer-navigation div.container-inline-css.active ul{
     max-height: 10000px !important;
    }
    }

<div class="footer-navigation">
 <div class="container-inline-css">
  <span class="koh-nav-section-title footer-link-title-text">
        <span>CONTACT INFO</span>

  </span>
  <ul class="koh-nav-section-items footer-link-items-text">
   <li><a href="null" target="_blank">
          <span class="icon-bg icon-phone"> </span>Call 1-800-STERLING</a>
   </li>
   <li><a href="/contact-us" target="_self">
          <span class="icon-bg icon-contact"></span> Contact Us</a>
   </li>
  </ul>
 </div>
 <div class="container-inline-css">
  <span class="koh-nav-section-title footer-link-title-text">
        <span>OUR COMPANY</span>

  </span>
  <ul class="koh-nav-section-items footer-link-items-text">
   <li><a href="http://www.annsacks.com/" target="_blank">
          About Us</a>
   </li>
   <li><a href="http://www.kallista.com/home.kls" target="_blank">
          E-Newsletter Sign Up</a>
   </li>
   <li><a href="http://www.robern.com/home.rbn" target="_blank">
          Careers</a>
   </li>
   <li><a href="/press-releases" target="_self">
          Press Room</a>
   </li>
   <li><a href="http://www.kohler.com/corporate/index.html" target="_blank">
          Kohler Co.</a>
   </li>
  </ul>
 </div>
 <div class="container-inline-css">
  <span class="koh-nav-section-title footer-link-title-text">

        <span>RESOURCES</span>

  </span>
  <ul class="koh-nav-section-items footer-link-items-text">
   <li><a href="/litrature" target="_self">
          Literature</a>
   </li>
   <li><a href="https://www.youtube.com/channel/UCMMnMReFTMuI9bpoctNGPkw/videos" target="_blank">
          Merchandise</a>
   </li>
   <li><a href="null" target="_blank">
          FAQs</a>
   </li>
   <li><a href="null" target="_blank">
          Glossary</a>
   </li>
   <li><a href="null" target="_blank">
          Tech Documents</a>
   </li>
  </ul>
 </div>
 <div class="container-inline-css">
  <span class="koh-nav-section-title footer-link-title-text">
        <span>CUSTOMER CARE</span>

  </span>
  <ul class="koh-nav-section-items footer-link-items-text">
   <li><a href="/cad-symbols" target="_self">
          Track Your Order</a>
   </li>
   <li><a href="http://www.inspiracionkohler.com/" target="_blank">
          Care &amp; Cleaning</a>
   </li>
   <li><a href="null" target="_blank">
          Warranties</a>
   </li>
   <li><a href="null" target="_blank">
          Videos</a>
   </li>
   <li><a href="null" target="_blank">
          Product Registration</a>
   </li>
  </ul>
 </div>
 <div class="container-inline-css">
  <span class="koh-nav-section-title footer-link-title-text">
        <span>SOCIAL</span>

  </span>
  <ul class="koh-nav-section-items footer-link-items-text">
   <li><a href="https://www.facebook.com/kohlermexico" target="_blank">
          <span class="icon-bg icon-social-facebook"></span>Facebook</a>
   </li>
   <li><a href="https://www.instagram.com/kohlerco/?hl=en" target="_blank">
          <span class="icon-bg icon-social-instagram"></span>Instagram</a>
   </li>
   <li><a href="https://www.youtube.com/user/kohler" target="_blank">
          <span class="icon-bg icon-social-pinterest"></span>Pinterest</a>
   </li>
   <li><a href="null" target="_blank">
          <span class="icon-bg icon-social-youtube "></span>YouTube</a>
   </li>
   <li><a href="null" target="_blank">
          <span class="icon-bg icon-social-houzz"></span> Houzz</a>
   </li>
  </ul>
 </div>
</div>

我已经准备好所有功能，除了 li 元素的底部边框以及末尾的箭头图标。感谢任何帮助。

Answer 1

1) 您使用页脚标记作为您的 CSS 选择器，但您的 HTML 代码中没有页脚标记。

2) 您还没有为 li 标签设置任何边框。您可以通过添加到 css

来实现

.koh-nav-section-items li {
  border-bottom: 1px solid #fff;
}

您应该能够在每个 li 元素的底部添加边框。如果你想排除最后一个元素，你可以添加

.koh-nav-section-items:last-of-type {
  border-bottom: none;
}

提示：尽量避免使用 !important

注意：如果你能为你的应用程序提供代码笔link，那会容易得多

为我的页脚添加底部边框和图标

Add a bottom border and icon to my footer

html

css

footer