иконки не в сноске

Question

Я хотел бы создать колонтитул в нижней части моей страницы с социальными иконками в Я попытался это:.

#footer { 
    position: absolute; 
    width: 100%; 
    bottom: 0px; 
    height: 40px; 
    background: #111111; 
} 

#footer .social { 
    vertical-align: middle; 
} 

#footer .social ul { 
    list-style: none; 
} 

#footer .social li { 
    float: left; 
    padding-right: 5px; 
    margin-top: 4px; 
} 

#footer .social li:hover{ 
    opacity: 0.7; 
} 

и HTML

<div id="wrapper"> 
    <div id="footer"> 
     <div class="social"> 
      <ul> 
       <li><img src="./images/footer/twitter.png" /></li> 
       <li><img src="./images/footer/email.png" /><li> 
      </ul> 
     </div> 
    </div> 

</div> 

Но результат, как:

Спасибо за чтение

Answer 1

Различные браузеры устанавливают различные правила CSS по умолчанию в браузерах, известных как таблица стилей пользователя.

Здесь для ul может быть по умолчанию margin, Вы должны сбросить его 0;

Здесь в вашем коде, попробуйте добавить:

#footer .social ul { 
    margin:0; 
} 

Или вы можете сбросить целые стили агента пользователя путем включения reset.css или normalise.css (Google любой из них и найти).

Answer 2

Используйте этот код для нижнего колонтитула. Я думаю, что вы просите за это, если не дайте мне знать:

#footer { 
position: absolute; 
width: 100%; 
bottom: 0px; 
height: 60px; 
background: #111111; 
} 

Вы можете добавить #footer .social ul {margin:0;} также как сказал @Prasanth K C.