html - 让 li 在同一行对齐

Question

如何让搜索框位于同一行中，紧跟在 Product Selector 项之后？

#header_nav_bar ul {
  list-style: none;
  padding-top: 0em;
  padding-right: 26em;
  padding-bottom: 0em;
  padding-left: 32em;
  font-family: serif;
  font: century;
  font-size: 11px;
  display: inline-block;
  color: black;
}
#header_nav_bar li {
  display: inline;
  padding: 0 1.8em;
}
#header_nav_bar a {
  font-weight: bold;
  color: black;
  display: inline;
}
#header_nav_bar a.current {
  color: text-decoration: none;
}
#header_nav_bar a {
  text-decoration: none;
  display: inline;
  color: black;
  font: century;
  font-family: sans-serif;
}
container-1 input#search {
  width: 100px;
  height: 10;
  background: #eff3fb;
  border: none;
  font-size: 8pt;
  float: right;
  color: #63717f;
  background-image: url('images/search1.png');
  background-repeat: no-repeat;
  background-position: right;
}
#header_nav_bar li.container-1 {
  border-right: none;
  vertical-align: bottom;
  height: auto;
  position: relative;
  display: inline;
  padding: 0 1.8em;
}

<nav id="header_nav_bar">
  <ul>
    <li><a href="Find.html">FIND BY CATEGORY</a> 
    </li>
    <li><a href="Brands.html">OUR BRANDS</a> 
    </li>
    <li class="logo">
      <a href="logo.html">
        <img src="images/logo.png" alt="logo" width="60" height="60">
      </a>
      </a>
    </li>
    <li><a href="Product Selector.html">PRODUCT SELECTOR</a>
    </li>
    <li class="container-1">
      <!--<div class="container-1">
                                                  <span class="icon"><i class="fa fa-search"></i></span>-->
      <input type="search" id="search" placeholder="search" />


    </li>
  </ul>
</nav>

Answer 1

尝试将 display: inline-block 添加到这个 css 类中，看看它是否有效。

container-1 input#search {
  width: 100px;
  height: 10;
  background: #eff3fb;
  border: none;
  font-size: 8pt;
  float: right;
  color: #63717f;
  background-image: url('images/search1.png');
  background-repeat: no-repeat;
  background-position: right;
  display: inline-block !important;
}