您可以使用flex来实现这一点，只需应用"margin-left：auto "到最后一个列表项。注意，我得到了基本的布局（导航到左边，搜索到右边的flex（分别使用flex-grow和flex-shrink）。
导航内部-应用flex样式来布局列表项，然后在：last-child上使用margin-left强制它向右远离其他列表项。
更新-从OP的意见-已经修改了它，有第二个导航列表的权利，搜索输入。更容易分裂列表比试图获得布局使用浮动等。

header {
  display: flex;
  align-items: center;
}

nav {
  flex-grow: 1
}

.nav-list {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-list li {
 padding: 4px 16px;
}

.search-wrapper {
  flex-shrink: 0;
   padding: 0 16px;
 )

<header>
  <nav>
   <ul class="nav-list">
     <li><a href="home.html">Home</a></li>
      <li><a href="about.html">About</a></li>
   </ul>
 </nav>
  <div class="search-wrapper">
    <input type ="search" placeholder="search" />
  </div>
     <ul class="nav-list nav-list-right">
        <li><a href="contact.html">Contact</a></li>
   </ul>
</header>