html表单和ul内联坏边距

Question

我是 Stack Overflow 论坛的新手，但我非常喜欢这个网站。请注意，英语不是我的母语，如有错误请见谅。

我有一个基于 Blogger 的网站（删除了小部件 CSS），顶部有一个固定栏，我实际上正在清理栏元素的代码。有一段时间，我将元素作为按钮放置在表格中，根本不是标准的。 我用列表代替了它们。

.barre{
  height:auto;
  position:fixed;
  top:0;
  left:0;
  right:0;
  padding:2px 8px 8px 8px;
  z-index:101;
  display:inline-block;
  min-width:910px;
  width:100%;
  border-bottom-style:solid;
  border-bottom-color: transparent;
  border-bottom-width: 1px;
  -ms-content-zooming: none;
  font-size:14px;
}
.desktop-navigation2{
  margin-left: 65px;
  margin-top: 12px;
  float:left;
}
.desktop-navigation2 nav{
  display:inline;
}
.desktop-navigation2 ul{
  list-style:none;
  display:inline;
}
.desktop-navigation2 ul li{
  margin:0;
  display:inline;
  padding:8px;
  z-index:102;
  text-transform:uppercase;
}
.fonctionsMenu2{
  float:right;
}
.fonctionsMenu2 ul{
  list-style:none;
  display:inline;
}
.fonctionsMenu2 ul li{
  display:inline-block;
  width:32px;
  height:32px;
}
.fonctionButtons{
  display:inline;
}
#rssButton{
  background: url(http://4.bp.blogspot.com/-hVL9mmUuEXE/VDv17OvnsdI/AAAAAAAAAGo/k59EB64PLSo/s1600/rss.png) no-repeat center center;
}
#fbButton{
  background: url(http://4.bp.blogspot.com/-76dXHJ5CB2Q/VDv1XigkUOI/AAAAAAAAAGg/pHfNu6uUdrI/s1600/fb.png) no-repeat center center;
}
#twittButton{
  background: url(http://2.bp.blogspot.com/-ZDsFn17J_zI/VDv03IeGV_I/AAAAAAAAAGU/dB0gr81S8Gw/s1600/twitter.png) no-repeat center center;
}
#last-uploaded{
  background: url(http://4.bp.blogspot.com/-qvYCQkmIoIQ/VDvz1CRU1GI/AAAAAAAAAGE/dgH_QcYbUHA/s1600/updates.png) no-repeat center center;
}
#updates{
  background: url(http://2.bp.blogspot.com/-hA9qsKVV1cQ/VDvz8W1xLmI/AAAAAAAAAGM/Bo1AMpokxXs/s1600/updates2.png) no-repeat center center;
}
.homeLink2{
  position:fixed;
  top: 9px;
  left: 6px;
}
.barre #cmRecherche{
  display: inline-block;
}
.barre #b-query{
  text-align:center;
  height: 32px;
  line-height:32px;    
}
.barre #b-searchbtn{
  height:32px;
}

<div class='barre'>
  <div class='desktop-navigation2' id='navigation'>
    <nav>
      <ul id='navigation2'>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <a expr:alt='data:link.title' expr:href='data:link.href' expr:title='data:link.title' id='menuCurrentPage2'>
              <li><data:link.title/></li>
            </a>
            <b:else/>
            <a expr:alt='data:link.title' expr:href='data:link.href' expr:title='data:link.title'>
              <li><data:link.title/></li>
            </a>
          </b:if>
        </b:loop>
      </ul>
    </nav>                 
  </div>
  <!-- MENU END -->
  <!-- BUTTONS START -->
  <div class='fonctionsMenu2'>
    <form expr:action='data:blog.homepageUrl + "search"' id='cmRecherche' method='get'>
      <input class='searchBox' id='b-query' maxlength='100' name='q' onfocus='window.scrollTo(0,0);' placeholder='RECHERCHER...' required='required' size='20' title='Tapez ce que vous cherchez sur mon site (requis).' type='text'/>
      <input alt='Rechercher' class='searchConfirm' id='b-searchbtn' src='http://4.bp.blogspot.com/-DVLNCmAOE8A/VDv2mLtnIhI/AAAAAAAAAGw/ArwG9vkFiLQ/s1600/search.png' title='Cliquer pour lancer la recherche' type='image' value='submit'/>
    </form>
    <div class='fonctionButtons'>
      <ul>
        <a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>
          <li id='rssButton'>
          </li>
        </a>
        <a href='https://www.facebook.com/myusername'>
          <li id='fbButton'>
          </li>
        </a>
        <a href='https://www.twitter.com/myusername'>
          <li id='twittButton'>
          </li>
        </a>
        <a expr:href='data:blog.homepageUrl + &quot;p/derniers-liens-remplaces.html&quot;'>
          <li id='last-uploaded'>
          </li>
        </a>
        <a expr:href='data:blog.homepageUrl + &quot;p/historique-des-mises-jour.html&quot;'>
          <li id='updates'>
          </li>
        </a>
      </ul>
    </div>
  </div>
</div>

CSS

问题出在第二部分，实际上搜索表单的上边距错误，但不是没有 CSS 来覆盖它。

截图：http://d.dbme.org/14121116121750/image.png

有办法解决吗？我对 CSS 和 HTML 的了解很多，但我没有找到解决方案。

感谢您以后的回答。

注意：我不需要支持 IE 6/7，只需要至少 8 个。

Answer 1

有效的代码

.barre{
  height:auto;
  position:fixed;
  top:0;
  left:0;
  right:0;
  padding:7px 8px 8px 8px;
  z-index:101;
  display:inline-block;
  min-width:910px;
  width:100%;
  border-bottom-style:solid;
  border-bottom-color: transparent;
  border-bottom-width: 1px;
  -ms-content-zooming: none;
  font-size:14px;
}
.desktop-navigation2{
  margin-left: 65px;
  margin-top: 8px;
  float:left;
}
.desktop-navigation2 nav{
  display:inline;
}
.desktop-navigation2 ul{
  list-style:none;
  display:inline;
}
.desktop-navigation2 ul li{
  margin:0;
  display:inline;
  padding:8px;
  z-index:102;
  text-transform:uppercase;
}
.fonctionsMenu2{
  float:right;
}
.fonctionsMenu2 ul{
  list-style:none;
  display:inline;
}
.fonctionsMenu2 ul li{
  display:inline-block;
  width:32px;
  height:32px;
  vertical-align:bottom;
}
.fonctionButtons{
  display:inline;
}
#rssButton{
  background: url(http://4.bp.blogspot.com/-hVL9mmUuEXE/VDv17OvnsdI/AAAAAAAAAGo/k59EB64PLSo/s1600/rss.png) no-repeat center center;
}
#fbButton{
  background: url(http://4.bp.blogspot.com/-76dXHJ5CB2Q/VDv1XigkUOI/AAAAAAAAAGg/pHfNu6uUdrI/s1600/fb.png) no-repeat center center;
}
#twittButton{
  background: url(http://2.bp.blogspot.com/-ZDsFn17J_zI/VDv03IeGV_I/AAAAAAAAAGU/dB0gr81S8Gw/s1600/twitter.png) no-repeat center center;
}
#last-uploaded{
  background: url(http://4.bp.blogspot.com/-qvYCQkmIoIQ/VDvz1CRU1GI/AAAAAAAAAGE/dgH_QcYbUHA/s1600/updates.png) no-repeat center center;
}
#updates{
  background: url(http://2.bp.blogspot.com/-hA9qsKVV1cQ/VDvz8W1xLmI/AAAAAAAAAGM/Bo1AMpokxXs/s1600/updates2.png) no-repeat center center;
}
.homeLink2{
  position:fixed;
  top: 9px;
  left: 6px;
}
.barre #cmRecherche{
  display: inline-block;
}
.barre #b-query{
  text-align:center;
  height: 32px;
  line-height:32px;
  vertical-align:bottom;   
}
.barre #b-searchbtn{
  height:32px;
  vertical-align:bottom;
}