CSS-позиционирование

Question

У меня возникли проблемы с переопределением некоторых элементов HTML с помощью CSS, я пытаюсь переместить некоторые изображения в шаблон для печати слов ... однако они отказываются сдвинуться с места. Соответствующий код CSS выглядит следующим образом:

Я пытаюсь переместить изображения социальных медиа в нижнем колонтитуле в соответствии с заполнением тела. Я не знаю, как сделать скрипт JS с PHP.

Любая помощь, которую вы можете предоставить, будет оценена по достоинству!

/* THISIS: Social icons */ 
ul.social-media{ 
    list-style:none; 
    padding:0; 
    margin: 0px 10px 0px 0px; 
} 
ul.social-media li{ 
    list-style:none; 
    float:left; 
    margin: 7px 8px 7px 8px; 
} 
ul.social-media li a{ 
    width: 16px; 
    display:block; 
    height: 16px; 
    text-indent: -10000px; 
    transition:all 0.35s ease-in-out; 
    -moz-transition:all 0.35s ease-in-out; 
    -webkit-transition:all 0.35s ease-in-out; 
    -o-transition:all 0.35s ease-in-out; 
    padding:12px; 
    background-position:left top; 
    background-color:#e3e3e3; 
    background-repeat:no-repeat; 
}ul.social-media li a.facebook{ 
    background-image: url('../img/contact-icons/facebook.png'); 
    padding-right:10%; 
} 
ul.social-media li a.twitter{ 
    background-image: url('../img/contact-icons/twitter.png'); 
    padding-right:10%; 
} 
ul.social-media li a.rss{ 
    background-image: url('../img/contact-icons/rss.png'); 
    padding-right:10%; 
} 
ul.social-media li a.google-plus{ 
    background-image: url('../img/contact-icons/google.png'); 
    padding-right:10%; 
} 
ul.social-media li a.skype{ 
    background-image: url('../img/contact-icons/skype.png'); 
    padding-right:10%; 
} 
ul.social-media li a.dribbble{ 
    background-image: url('../img/contact-icons/dribbble.png'); 
    padding-right:10%; 
} 
ul.social-media li a.twitch{ 
    background-image: url('../img/contact-icons/twitch.png'); 
    padding-right:10%; 
} 
ul.social-media li a.vimeo{ 
    background-image: url('../img/contact-icons/vimeo.png'); 
    padding-right:10%; 
} 
ul.social-media li a.linked-in{ 
    background-image: url('../img/contact-icons/linkedin.png'); 
    padding-right:10%; 
} 
ul.social-media li a.reddit{ 
    background-image: url('../img/contact-icons/reddit.png'); 
    padding-right:10%; 
} 
ul.social-media li a.wordpress{ 
    background-image: url('../img/contact-icons/wordpress.png'); 
    padding-right:10%; 
} 
ul.social-media li a.youtube{ 
    background-image: url('../img/contact-icons/youtube.png'); 
    padding-right:10%; 
} 
ul.social-media li a:hover{ 
    background-position:0px -40px; 
    transition:all 0.2s ease-in-out; 
    -moz-transition:all 0.2s ease-in-out; 
    -webkit-transition:all 0.2s ease-in-out; 
    -o-transition:all 0.2s ease-in-out; 
} 

Answer 1

Это не ясно, что вы пытаетесь достичь, но следующие свойства CSS являются те, которые вы должны играть с: позиции/маржинальной/обивка/дисплей/левый/правый/верхний/нижний

Например попробуйте

display: inline-block; 
position: relative; 
margin-left: 20px; 

Answer 2

Я думаю, что вы можете использовать маржу свойства вместо заполнения, или вы можете установить положение: относительное, абсолютное или установить поплавок: влево, вправо для элементов, которые вы хотите, чтобы изменить положение. Можете ли вы подробно описать свои html-файлы или любые plunkers (онлайн-примеры)?