CSS响应菜单图标文本

Question

我正在改进我的投资组合网站（www.kikidesign.net），目前正在处理页脚。我试图让它响应，其中链接（带图标）可以保持不变，但会根据浏览器窗口进行重新排列。例如，对于桌面版本，它将在一行中，但对于平板电脑版本，它将是两行，每行包含两个链接，对于移动版本，它将像列表一样。但是，我无法将图标和文本保存在一个地方。当我移动浏览器窗口时，图标不断弹出它们的位置。我该怎么做才能解决它？

HTML

<div id="footercontent"> 
       <ul class="ca-menu"> 
       <li class="about2"> 
       <a href="<?php echo get_option('home'); ?>/about" > 
        <span class="aboutimg"></span>About Me 
       </a> 
       </li> 
       <li class="contact2"> 
       <a href="<?php echo get_option('home'); ?>/contact" > 
        <span class="contactimg"></span>Contact 
       </a> 
       </li> 
       <li class="download"> 
       <a href="kikidesignResume.pdf"> 
        <span class="downloadimg"></span>Resume 
       </a> 
       </li> 
       <li class="facebook"> 
       <a href="https://www.facebook.com/kikidesignnet" > 
        <span class="facebookimg"></span>Facebook 
       </a> 
       </li> 
       </ul> 
      </div> 

CSS

#footercontent { 
    position: relative; 
    padding-top: 15px; 
    margin-left: auto; 
    margin-right: auto; 
    width: 100%; 
    height: 100%; 
    min-height: 100px; 
} 
#footercontent .ca-menu { 
    width: 100%; 
    padding: 0; 
    list-style: none; 
    margin: 30px auto; 
} 
#footercontent .ca-menu li { 
    width: 23%; 
    height: 100%; 
    position: relative; 
    display: inline-block; 
    background: #2d1d53; 
    padding: 0 20px; 
    float: left; 
} 
#footercontent .ca-menu li a { 
    text-decoration: none; 
    text-align: left; 
    font-family: 'PrintClearlyRegular'; 
    font-weight: normal; 
    font-style: normal; 
    font-size: 1.75em; 
} 
#footercontent .ca-menu li a:hover { 
    text-decoration: underline; 
    text-decoration-color: white; 
    -moz-text-decoration-color: white; 
    -webkit-text-decoration-color: white; 
    -o-text-decoration-color: white; 
    -ms-text-decoration-color: white; 
} 
.ca-menu li:hover .aboutimg, .ca-menu li:hover .contactimg, .ca-menu li:hover .downloadimg, .ca-menu li:hover .facebookimg { 
    color: #ffffff; 
    /**font-size: 30px;**/ 
    opacity: 1; 
} 
.aboutimg { 
    display: inline-block; 
    width: 50px; 
    height: 60px; 
    text-align: center; 
    background: url(images/girlIcon2.png) no-repeat 0 0; 
    opacity: 0.3; 
    vertical-align: middle; 
    margin-top: -10px; 
    margin-right: 10px; 
    } 
.ca-menu .about2 a { 
    color: #f9a145; 
    border: none; 
    text-decoration: none; 
} 
#contactimg { 
    padding: 15px 0 12px 0; 
} 
.contactimg { 
    display: inline-block; 
    width: 50px; 
    height: 60px; 
    background: url(images/contact.png) no-repeat 0 0; 
    margin-left: auto; 
    margin-right: auto; 
    vertical-align: middle; 
    margin-top: -8px; 
    opacity: 0.3; 
    margin-right: 10px; 
} 
.ca-menu .contact2 a { 
    color: #4595d1; 
    border: none; 
    text-decoration: none; 
    padding: 20px; 
} 
.downloadimg { 
    display: inline-block; 
    width: 50px; 
    height: 60px; 
    background: url(images/download.png) no-repeat 0 0; 
    margin-left: auto; 
    margin-right: auto; 
    vertical-align: middle; 
    margin-top: -8px; 
    opacity: 0.3; 
    margin-right: 10px; 
} 
.ca-menu .download a { 
    color: #f7e400; 
    border: none; 
    text-decoration: none; 
    padding: 20px; 
} 
.facebookimg { 
    display: inline-block; 
    width: 50px; 
    height: 60px; 
    background: url(images/facebook.png) no-repeat 0 0; 
    margin-left: auto; 
    margin-right: auto; 
    vertical-align: middle; 
    margin-top: -8px; 
    opacity: 0.3; 
    margin-right: 10px; 
} 
.ca-menu .facebook a { 
    color: #B0B0B0; 
    border: none; 
    text-decoration: none; 
    padding: 20px; 
} 

Answer 1

#footercontent .ca-menu { 
    width: 100%; 
    padding: 0; 
    list-style: none; 
    margin: 30px auto; 
} 
#footercontent .ca-menu li { 
    position: relative; 
    display: inline-block; 
    background: #2d1d53; 
    padding: 0 20px; 
    float: left; 
} 

我已经修改了这两个部分。

，并为移动：

@media (max-width: 480px) { 
    #footercontent .ca-menu li { 
    position: relative; 
    display: inline-block; 
    background: #2d1d53; 
    padding: 0 20px; 
    float: left; 
    width: 100%; 
} 
} 

您可以为其他尺寸也做相同的：

@media (min-width: 480px) and (max-width: 720px) { 
     #footercontent .ca-menu li { 
     position: relative; 
     display: inline-block; 
     background: #2d1d53; 
     padding: 0 20px; 
     float: left; 
     width: 40%; 
    } 
} 

DEMO