对齐水平导航菜单

Question

>我有一个水平导航栏。我希望在导航栏中添加一个搜索栏，但是当我插入它时，我的导航栏未对齐。

https://jsfiddle.net/r6ntxg2f/

如您所见，我的菜单悬停在绿线上方，右侧菜单徘徊得更多。 我希望将整个菜单与绿线对齐。

<li id="searchbar">
  <form id="search" method="post" style="">
    <input id="bb" type="text" style="" />
    <input id="cc" type="submit" value="Search" style="" />
  </form>
</li>

没有搜索就是这样。 https://jsfiddle.net/q476f585/（工作）

Answer 1

似乎您的大小和填充导致了问题，请参阅 jsfiddle 以获取更新的解决方案。我所做的只是更新padding和display风格。对于底部边框，您必须确保前两个按钮上的其他填充正确。

Answer 2

您可以通过调整填充来解决此问题。这是工作代码。

ul#menu_left {
  position: relative;
  left: 100px;
  width: 75%;
  font: 75% verdana;
  list-style-type: none;
  padding: 10px 10px 5px 10px;
  border-bottom: 1px solid green;
}
ul#menu_right {
  padding-right: 10px;
  float: right;
  padding-top: 2px
}
ul#menu_left li {
  display: inline;
}
ul#menu_left li a {
  padding: 6px 4px;
  border-bottom: 1px solid green;
  text-decoration: none;
  color: white;
  background-color: green;
}
ul#menu_left a:hover {
  color: black;
  background: yellow;
  border-bottom: 1px solid yellow;
}
li#searchbar {
  background-color: green;
  padding: 6px 4px;
  border-bottom: 1px solid green;
}
li#searchbar form {
  display: inline;
}
li#searchbar input {
  width: 50px;
}

<ul id="menu_left">
  <li><a id="tab1" href="#">The We</a>
  </li>
  <li><a id="tab2" href="#">Book</a>
  </li>
  <li><a id="tab3" href="#">Tab</a>
  </li>
  <li id="searchbar">
    <form id="search" method="post">
      <input id="bb" type="text" />
      <input id="cc" type="submit" value="Search" />
    </form>
  </li>
  <ul id="menu_right">
    <li><a id="tab5" style="" href="#">Up</a>
    </li>
    <li><a id="tab6" href="#">Contact</a>
    </li>
  </ul>
</ul>