揃え社会のアイコン次のメニューへ

Question

はここに私のバイオリンです。

#main-menu { 
     float: right; 
    } 

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

Answer 1

あなたは.container-fluid要素にフレキシボックスを使用することができます（私は、私がdisplay: flexを割り当てるために、私のバイオリンでクラスx1それを割り当てられています）。 nav要素にmargin-left: autoと入力し、そこからすべてを右に移動します。

プラス私は、ヘッダーに別の背景を与えた - あなたは浮動小数点数を使用するつもりなら、黒はすべて非表示になり....

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>