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

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

注意:如果您可以提供指向您的应用程序的 codepen 链接，那会容易得多