Align Социальные иконки рядом с меню

Question

Вот моя скрипка: https://jsfiddle.net/xqt3mxpx/1

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

#main-menu { 
     float: right; 
    } 

    .social-icons { 
     float: right; 
     clear: right; 
    } 

Answer 1

Вы можете использовать Flexbox на .container-fluid элементе (я назначил его класс x1 в моей скрипке, к которому я присвоил display: flex). А затем положите margin-left: auto на элемент nav, чтобы переместить все оттуда вправо.

Плюс я дал заголовку другой фон - черный сделал весь невидимым ....

https://jsfiddle.net/u8vyxmfe/1/

Answer 2

Если вы собираетесь использовать поплавки, вам нужно переставить СЧ и социальное меню, так что оба могут быть перемещены вправо, а социальные иконки находятся на крайнем правом углу. Тогда нет необходимости в clear: right;.social-icons, но чтобы выровнять его с основным навигационным устройством, вам необходимо применить ту же самую вертикальную прокладку к .social-icons, что и в ссылках навигационного меню.

#main-header { 
 
    margin-top: 20px; 
 
    background: #000; 
 
    font-size: 14px; 
 
    text-transform: uppercase; 
 
} 
 
#main-header .logo { 
 
    float: left; 
 
} 
 
#main-menu { 
 
    float: right; 
 
} 
 
#main-menu ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
#main-menu ul li { 
 
    float: left; 
 
    margin-left: 20px; 
 
    padding: 5px; 
 
} 
 
#main-menu ul li:first-child { 
 
    margin-left: 0; 
 
} 
 
.social-icons { 
 
    float: right; 
 
    padding: 5px; 
 
} 
 
.social-icons .fa { 
 
    margin-left: 10px; 
 
    padding: 5px; 
 
    display: block; 
 
    margin-left: 10px; 
 
    float: left; 
 
    cursor:pointer; 
 
}

<header id="main-header"> 
 
<div class="container-fluid"> 
 
      <a class="logo"> 
 
       <img src="logo" alt="Logo"> 
 
      </a> 
 
    <div class="social-icons"> 
 
     
 
     <a style="display: inline-block" href="http://facebook.com" target="_blank"><i class="fa fa-facebook "></i>F</a> 
 
      
 
     <a href="http://googleplus.com" target="_blank"><i class="fa fa-google-plus"></i>G+</a> 
 
      
 
     <a href="http://twitter.com" target="_blank"><i class="fa fa-twitter"></i>T</a> 
 
    </div>  
 
</div> 
 
      
 
      <nav id="main-menu" class="menu-{menu slug}-container hidden-sm hidden-xs"><ul id="menu-main-menu" class="menu clearfix"><li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-4 current_page_item menu-item-15"><a href="http://localhost/avoar/">Home</a></li> 
 
<li id="menu-item-18" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-18"><a href="#">Services</a></li> 
 
<li id="menu-item-17" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-17"><a href="#">News</a></li> 
 
<li id="menu-item-16" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-16"><a href="#">Shop</a></li> 
 
<li id="menu-item-19" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-19"><a href="#">Contact Us</a></li> 
 
</ul></nav>    
 

 

 
</header>