Создание нижнего колонтитула HTML/CSS - не работает

Я пытаюсь создать нижний колонтитул с 2 классами, но по какой-то причине они не находятся в одной строке друг с другом. Я пробовал все, и я понятия не имею, в чем проблема. Кроме нижнего колонтитула есть дополнительное свободное пространство. Я хочу, чтобы нижний колонтитул был фиксированной высотой и сохранил два элемента в одной строке (авторское право находится в центре, а значки справа). Кто-то может помочь?Создание нижнего колонтитула HTML/CSS - не работает

HTML:

<footer> 

    <div class="footer"> 

     <div class="copyright">Copyright</div> 

     <div class="social-icons-footer"> 
      <ul> 
       <li><a href="#" target="_blank"><i class="fa fa-instagram" style="font-size:30px"></i></a></li> 
       <li><a href="#" target="_blank"><i class="fa fa-facebook" style="font-size:30px"></i></a></li> 
       <li><a href="#" target="_blank"><i class="fa fa-twitter" style="font-size:30px"></i></a></li> 
       <li><a href="#" target="_blank"><i class="fa fa-linkedin" style="font-size:30px"></i></a></li> 
      </ul> 
     </div> 
    </div> 


</footer>

CSS:

footer { 
    clear: both; 
    position: relative; 
    width: 100%; 
    height: 60px; 
    background-color: black; 
      } 

    footer .copyright { 
    text-align: center; 
    padding: 12px; 
    font-size: 12px; 
    color: white; 
     } 


    footer .social-icons-footer ul { 
    list-style: none; 
    float: right; 
     } 

    footer .social-icons-footer li { 
    display: inline-block; 
     } 

    .social-icons-footer ul a { 
    color: white; 
    margin: 14px; 
    } 

    .social-icons-footer ul a:hover { 
    color: grey; 
    }

В настоящее время, это выглядит следующим образом Image - Я хочу, чтобы авторские права быть в центре и социальных икон быть справа на ТОТ ЖЕ линия.

источник

2016-09-14 C. Lagos

Что не в той же строке? Можете ли вы добавить ссылку jsfiddle? или какой-то иллюстрации, чтобы показать, что у вас есть и чего вы пытаетесь достичь? – Arjun

Какова цель div '.footer'? – Rob

http://codepen.io/anon/pen/KgzvrY

Измененные настройки (в дополнение к другим установкам):

footer { 
    line-height: 60px; 
} 
footer .social-icons-footer ul { 
    position: absolute; 
    top: 0px; 
    right: 12px; 
    margin: 0; 
} 
footer .social-icons-footer li { 
    line-height: 0px; 
}

источник

2016-09-14 23:31:13 Johannes

это работает !! Спасибо!! –

На самом деле есть пустое пространство внизу, любая идея почему? –

Возможно, из-за поля по умолчанию. Попробуйте добавить 'body, html: {margin: 0; } ' – Johannes

Вы не установить Div, чтобы быть инлайн

Добавьте этот код в ваш CSS div.footer div{ display: inline;} А также удалить height:60px из footer свойства, если нет необходимости ..

источник

2016-09-14 23:18:43

Я считаю, что 'display: inline-block' будет более уместным, но в противном случае ou верны. –

Да встроенный блок будет более подходящим отдыхом до ваших потребностей ... –

Использование display:inline; в вашем .footer

источник

2016-09-14 23:21:38

Проверьте, может ли это быть в порядке для вас. Я вырезал самый неиспользуемый css.

.footer {width:100%;height:30px;line-height:30px;} 
 
.copyright {width:50%;float:left;} 
 
.social-icons-footer {width:50%;float:left;} 
 
.social-icons-footer ul {text-align:right;margin: 0;padding: 0;list-style-type: none;} 
 
.social-icons-footer ul li {display:inline;padding:0px 5px;}

<link media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"> 
 
<footer> 
 

 
    <div class="footer"> 
 

 
     <div class="copyright">Copyright</div> 
 

 
     <div class="social-icons-footer"> 
 
      <ul> 
 
       <li><a href="#" target="_blank"><i class="fa fa-instagram" style="font-size:30px"></i></a></li> 
 
       <li><a href="#" target="_blank"><i class="fa fa-facebook" style="font-size:30px"></i></a></li> 
 
       <li><a href="#" target="_blank"><i class="fa fa-twitter" style="font-size:30px"></i></a></li> 
 
       <li><a href="#" target="_blank"><i class="fa fa-linkedin" style="font-size:30px"></i></a></li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 

 

 
</footer>

источник

2016-09-14 23:27:17

Создание нижнего колонтитула HTML/CSS - не работает

ответ

Смежные вопросы