Question

我正在制作一个响应式页脚，我能够让一切正常运转。布局是一个小问题。我无法在每个li字段后获得底部边框，也无法在最后获得图标。这就是我到目前为止所做的。请让我知道我错过了什么。

＆＃13;

    @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;
    }
    }

＆＃13;

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

＆＃13;

我拥有所有功能，期望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链接，则会更容易

在页脚添加底部边框和图标

1 个答案: