CSS：右對齊導航欄和搜索框/圖標在同一行上

Question

我試圖讓導航欄和搜索圖標（使用CSS3，向外展開以顯示搜索輸入框）對齊到另一個出現在我的容器/ div的右側。它沒有問題左對齊。正確的是這個問題。下面是當前的代碼，這也是在https://codepen.io/anon/pen/KmgoqE，這裏是有問題的網頁：http://vps30689.inmotionhosting.com/~myclar5/

HTML

<header id="masthead" class="site-header"> 
    <nav id="site-navigation" class="main-navigation"> 
       <div class="menu-nav-container"> 
      <ul id="primary-menu" class="menu"> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">Products</a></li> 
      <li><a href="#">Contact</a></li> 
      </ul> 
      </div> 
     <form role="search" method="get" class="search-form" action="http://vps30689.inmotionhosting.com/~myclar5/"> 
       <label> 
        <span class="screen-reader-text">Search for:</span> 
        <input type="search" class="search-field" placeholder="Search &hellip;" value="" name="s" /> 
       </label> 
       <input type="submit" class="search-submit" value="Search" /> 
      </form> 
      </nav> 
</header> 

CSS

/*-------------------------------------------------------------- 
## Menus 
--------------------------------------------------------------*/ 
.main-navigation { 
    display: block; 
    float: left; 
    width: 80%; 
} 
.main-navigation ul { 
    list-style: none; 
    margin: 30px 0 0 0; 
    padding-left: 0; 
} 
.main-navigation li { 
    float: left; 
    position: relative; 
} 
.main-navigation a { 
    color: #333d47; 
    display: block; 
    font-weight: 600; 
    text-decoration: none; 
    padding: 6px 18px; 
} 
/*-------------------------------------------------------------- 
## Saarch Form 
--------------------------------------------------------------*/ 
.site-header .search-field { 
    background-color: transparent; 
    background-image: url(http://vps30689.inmotionhosting.com/~myclar5/wp-content/themes/clarity/img/search-icon.png); 
    background-position: 5px center; 
    background-repeat: no-repeat; 
    background-size: 24px 24px; 
    border: none; 
    cursor: pointer; 
    height: 37px; 
    margin: 0; 
    padding: 0 0 0 34px; 
    position: relative; 
    -webkit-transition: width 400ms ease, background 400ms ease; 
    transition:   width 400ms ease, background 400ms ease; 
    width: 0; 
} 
.site-header .search-field:focus { 
    background-color: #fff; 
    border: 2px solid #c3c0ab; 
    cursor: text; 
    outline: 0; 
    width: 230px; 
} 
.search-form 
.search-submit { 
    display:none; 
} 

Answer 1

使用flex父，並justify-content: flex-end;移動項目和align-items: baseline垂直對齊菜單和圖標。

.main-navigation { 
    float: left; 
    width: 80%; 
    display: flex; 
    justify-content: flex-end; 
    align-items: baseline; 
}