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; 
}