Html Chrome中浮动的div定位错误

我正在编写一个相当简单的导航栏，其中包含左右浮动的链接。混合中还有一个搜索字段，在li标记的内部，当包含时，下一个li标记会垂直向下偏移几个像素（除非测量，否则可能很难看到，但当它在导航栏的底线上获得悬停样式时，它会变得非常明显）。它发生在Chrome（30.0.1599.101）中，但不是Safari

有人能帮忙吗，或者提出解决办法吗

第#节topnav{
宽度：100%；
高度：4.1875雷姆；
位置：固定；
排名：0；
z指数：99；
}
第#节topnav.navcontainer{
宽度：25雷姆；
保证金：0自动；
位置：相对位置；
顶部：1.6875雷姆；
}
第#节顶部导航{
浮动：左；
}
第#节顶部导航ul{
保证金：0；
填充：0；
}
第#节topnav nav ul li{
显示：内联；
保证金权利：2.1875雷姆；
}
第#节topnav nav ul li a{
垫底：1.1875rem；
}
第#节topnav ul li.搜索栏{
左边距：0；
}
第#节topnav ul li.searchbar输入{
宽度：4rem；
}
第#topnav#topnav账户{
浮动：对；
}
第#topnav nav#topnav账户li节{
显示：内联；
右边距：0；
左边距：2.1875雷姆；
位置：相对位置；
顶部：-1px；
}
第#节topnav{
边框底部：1px实心#968c83；
背景色：白色；
}
第#节topnav nav ul li a{
颜色：#968c83；
}
章节#topnav nav ul li a：链接{
边框底部：5px实心rgba（255,255,255,0）；
}
第#topnav nav ul li a节：悬停，第#topnav nav ul li a.activelink节{
边框底部：5px实心#968c83；
}
第#节topnav nav ul li.搜索栏{
颜色：#968c83；
}
第#节topnav nav ul li.searchbar输入{
颜色：#968c83；
}
第#节topnav{
字体大小：0.875rem；
}
第#节topnav ul{
列表样式类型：无；
}
第#节topnav ul li a{
文字装饰：无；
}
这是
上的边距和填充

不过，作为补充说明，我认为您的搜索框不应该位于
中

谢谢！你有什么建议？它是否应该在自己的浮动div中，旁边有一个ul，里面有一个li？是的，我会在右边浮动一个容器，其中包含一个
和登录链接。如果登录链接是独立的，那么它是列表项吗？可能不会。我已经更新了你的小提琴，给你一个新的开始。有相当多的变化，因为我注意到的事情，如固定高度的容器和其他一些调整。浏览一下CSS，看看它是否对您有所帮助。
<section id="topnav">
  <div class="navcontainer">
    <nav id="topnav-main">
      <ul>
        <li><a href="/" class="home activelink">Home</a></li>
        <li><a href="/about" class=" ">About</a></li>
      </ul>
    </nav>
    <nav id="topnav-account">
      <ul>
         <li class="searchbar">
          <input type="text" value="Search" />
        </li>
        <li><a href="login" class="store login">Login</a></li>
      </ul>
    </nav>
  </div>
</section>

section#topnav {
  width: 100%;
  height: 4.1875rem;
  position: fixed;
  top: 0;
  z-index: 99;
}
section#topnav .navcontainer {
  width: 25rem;
  margin: 0 auto;
  position: relative;
  top: 1.6875rem;
}
section#topnav nav {
  float: left;
}
section#topnav nav ul {
  margin: 0;
  padding: 0;
}
section#topnav nav ul li {
  display: inline;
  margin-right: 2.1875rem;
}
section#topnav nav ul li a {
  padding-bottom: 1.1875rem;
}
section#topnav ul li.searchbar {
  margin-left: 0;
}
section#topnav ul li.searchbar input {
  width: 4rem;
}
section#topnav nav#topnav-account {
  float: right;
}
section#topnav nav#topnav-account li {
  display: inline;
  margin-right: 0;
  margin-left: 2.1875rem;
  position: relative;
  top: -1px;
}
section#topnav {
  border-bottom: 1px solid #968c83;
  background-color: white;
}
section#topnav nav ul li a {
  color: #968c83;
}
section#topnav nav ul li a:link {
  border-bottom: 5px solid rgba(255, 255, 255, 0);
}
section#topnav nav ul li a:hover, section#topnav nav ul li a.activelink {
  border-bottom: 5px solid #968c83;
}

section#topnav nav ul li.searchbar {
  color: #968c83;
}
section#topnav nav ul li.searchbar input {
  color: #968c83;
}

section#topnav {
  font-size: 0.875rem;
}
section#topnav ul {
  list-style-type: none;
}
section#topnav ul li a {
  text-decoration: none;
}

section#topnav nav ul li.searchbar input {
  color: #968c83;
  margin: 0;
  padding: 0;
}