2017-11-05 3 views
0

나는 반응 형 바닥 글을 작성 중이므로 모든 것을 작동시킬 수있었습니다. 레이아웃은 작은 문제가있는 곳입니다. 각 li 필드 다음에 바닥 경계선을 가져올 수 없으며 마지막에 아이콘을 얻을 수 없습니다. 이것은 내가 지금까지 해왔 던 것이다. 친절하게도 제가 빠진 것을 알려주십시오. 아래쪽 테두리와 아이콘을 내 바닥 글에 추가하십시오.

나는 곳의 모든 기능이

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

 
    .brand-logos{ 
 
    \t margin: 0 auto !important; 
 
    \t 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{ 
 
    \t width: 100% !important; 
 
    \t padding:10px !important; 
 
    \t margin:0 !important; 
 
    \t border-bottom: 1px solid #77777A !important; 
 
    } 
 
    
 
    footer .footer-navigation .container-inline-css span{ 
 
    \t margin: 0 !important; 
 
     padding: 0px !important; 
 
     cursor: pointer !important; 
 
    } 
 
    
 
    footer .footer-navigation div.container-inline-css ul{ 
 
    \t max-height: 0 !important; 
 
     overflow: hidden !important; 
 
     padding: 0 20px !important; 
 
    } 
 
    
 
    footer .footer-navigation div.container-inline-css.active ul{ 
 
    \t max-height: 10000px !important; 
 
    } 
 
    }
<div class="footer-navigation"> 
 
\t <div class="container-inline-css"> 
 
\t \t <span class="koh-nav-section-title footer-link-title-text"> 
 
     <span>CONTACT INFO</span> 
 

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

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

 
     <span>RESOURCES</span> 
 

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

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

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


는 리튬 요소의 아래쪽 테두리 또한 끝의 화살표 아이콘을 기대합니다. 어떤 도움을 주셔서 감사합니다.

enter image description here

답변

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

에게 팁을 추가 할 수 있습니다 사용하여 피하려고 중요한

메모를! 앱에 codepen 링크를 제공 할 수 있다면, 그것은

훨씬 쉬울 것
관련 문제