让 li 在同一行对齐

Question

如何让搜索框出现在同一行中，紧跟在 产品选择器 项之后？

#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 class 中，看看是否有效。

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

Answer 2

你的代码中有一些错误，我修正了它们（稍微改进了你的代码），这里只是其中的几个：

在logo

a

font: century 不行
color: 在 .current

等等。

注意:不要使用width/height HTML标签，样式在CSS中[=19] =]

#header_nav_bar ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 960px;
  font-family: serif;
  font-size: 11px;
  color: black;
}
#header_nav_bar li {
  display: inline-block;
  padding: 0 1em; /* changed for demo */
}
#header_nav_bar a {
  font-weight: 700;
  color: black;
  display: block;
  text-decoration: none
}
#header_nav_bar a.current {
  color: red
}
.container-1 input#search {
  width: 100px;
  height: 10px;
  background: #eff3fb;
  border: none;
  font-size: 8pt;
  color: #63717f;
  background: url('//lorempixel.com/100/10') no-repeat right;

}

<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="//lorempixel.com/60/60" alt="logo" />
      </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>

让 li 在同一行对齐

Get li aligned in the same line

html

css

html-lists

positioning