让li在同一行中对齐

Question

如何在产品选择器项后面的同一行中显示该搜索框？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 2

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

• 在logo
中双重关闭font: century
• color:无效
{li> .current空width

等。

注意：请勿使用height / #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; } HTML标记，而是使用CSS中的样式

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

{{1}}