2015-02-25 4 views
1

Отказ от ответственности: Я Python кодер научиться использовать CSS/HTML и т.д. и т.п.вопросы выравнивания с социальной панели в CSS (начальной загрузки) класс = «липкого-бар»

Правильные парни/девочки, я просто работаю на липкой панели для моего веб-сайта, а на картинке вы увидите, что социальный бар неправильно выровнен. См. Прикрепленное изображение. (Это долго)

enter image description here

Я использовал:

* {border: dashed blue 1px;} 

в CSS, чтобы увидеть, если мои дивы не были правильно выровнены, но они, кажется, хорошо.

Вот HTML в вопросе (ссылки удалены):

<div class="sticky-bar"> 
    <div class="sticky-bar-inner"> 
     <p>&#169;2015 The astrobox.io Project<p> 
     <ul id="footerlist"> 
      <li class="social"><a href="#"><img src="some link" width="42" height="42"></img></a></li> 
      <li class="social"><a href="#"><img src="some link" width="42" height="42"></img></a></li> 
      <li class="social"><a href="#"><img src="some link" width="42" height="42"></img></a></li> 
     </ul> 
    </div> 
</div> 

CSS-в вопросе:

.sticky-bar { 
    background: #000000; 
    bottom: 0; 
    color: #ffffff; 
    font-weight: 600; 
    left:0; 
    margin: 0; 
    opacity: 0.95; 
    padding: 0em; 
    position:fixed; 
    width: 100%; 
    z-index:99999; 
} 

.sticky-bar-inner { 
    margin:0 auto; 
    text-align: center; 
    width:100%; 
    background-color: #ffffff; 
    padding: 3px; 
    font-family: 'Roboto', sans-serif; 
    font-size: 11px; 
    color: #000000; 
} 

.sticky-bar-inner p { 
    margin:0 auto; 
    padding: 3px; 
    text-align: center; 
    width:100%; 
} 

#footerlist li { 
    display: inline; 
    list-style-type: none; 
    /*padding-right: 5px;*/ 
} 

Изображения также 512x512 прижата к 42x42 с СРК (это могло быть причиной), и они однородны и входят в набор.

Если кто-нибудь может предложить исправить ошибку или еще лучше, почему он не правильно выравнивается, я был бы очень благодарен.

Thankyou

ответ

3

Ваш список имеет по умолчанию отступы следует удалить, так как он толкает содержимое к немного вправо:

#footerlist { 
    padding-left:0; 
}