我的搜索栏不能移动到导航栏的右边

<div class="navigation">
  <ul>
    <li>首页</li>
    <li>关于我们</li>
    <li>产品</li>
    <li class="search-bar">
      <input type="text" placeholder="搜索...">
      <button>搜索</button>
    </li>
  </ul>
</div>

.navigation {
  background-color: #f2f2f2;
  padding: 10px;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li {
  display: inline-block;
  margin-right: 10px;
}

.search-bar {
  float: right;
}

.search-bar input[type="text"] {
  width: 150px;
  padding: 5px;
}

.search-bar button {
  padding: 5px 10px;
  background-color: #999;
  border: none;
  color: #fff;
}