将<li>与<input />对齐</li>

Question

我想将LI中的文本和输入对齐，与左侧的菜单进行水平对齐。这是它的外观。

我需要将简报与左边的菜单对齐。

CSS

#footer .div1{
    float:left;
}
#footer ul{
    list-style:none;
}
#footer li{
    float:left;
    padding-left:20px;
    font-size:18px;
}
#footer li:first-child{
    padding-left:0px;
}

HTML

<div id="footer">
  <div class="div1">
    <ul>
      <li><b>WE &hearts; TO NETWORK</b></li>
      <li>FACEBOOK</li>
      <li>BLOG</li>
      <li>CONTACT</li>
      <li>NEWSLETTER : <input type="text" name="email" id="emailNl" style="font-family:arial; width:200px; margin:0px; padding:0px;"/> <span id="submitNl" style="cursor:pointer">OK</span></li>
    </ul>
  </div>
  <div style="clear:both"></div>
</div>

由于

IMAGE UPDATED！

填充和边距0px几乎就在那里，但你可以注意到一点点差异。 ：S

更新2

通过改变我的LI左边的float：显示：inline-block，现在文本是对齐的但是输入看起来像padding-top 2px太多了...我想我会调整它来制作它适合并浏览每个浏览器。

Answer 1

您的问题是由float: left;引起的。将其替换为display: inline-block;，你会没事的。

亲自尝试：inline-block vs float:left

Answer 2

尝试将其放入jsfiddle。在我看来，输入标签试图在自身周围放置一些填充/边距（哦，我总是忘记哪个是哪个）。尝试将它们设置为0px。

Answer 3

尝试重置元素的填充和边距，然后尝试使用vertical-align属性 - http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

虽然我测试过，但它们完全一致。下面是firefox的预览

你可以尝试

#footer ul {
    list-style: none outside none;
    margin: 0;
    overflow: auto;
    padding: 0;
}

input[type=text]{
padding:0;
margin:0;
}

看看它是否有效。

Answer 4

不知道这样看起来是否合适，但确实可以胜任。

#emailNl{
margin-top:-3px;
}