Align <li> with <input> with the text

I would like to align the text and input in the LI to be horizontaly aligned with the menu on the left. Here how it looks.

I need the newsletter to be align with the menu on the left.

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>

Thanks

IMAGE UPDATED!

With padding and margin 0px it's almost there but you can notice a slight difference. :S

UPDATE 2

By changing the float:left of my LI to display:inline-block, now the text is align but the input seems to be like padding-top 2px too much ... I think i'll tweak this开发者_如何学JAVA to make it fit and see through each browsers.

Your problem is caused by float: left;. Replace it with display: inline-block; and you'll be fine.

Try it yourself: inline-block vs float:left

Try putting it in a jsfiddle. It looks to me like the input tag is trying to put some padding/margin (oh how I always forget which is which) around itself. Try setting those to 0px.

try reset the padding and margin of the element and try vertical-align property - http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

although, I tested, they align just perfectly as it is. below is the preview from firefox

You can try

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

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

see if it works.

Don't know if this will look good but this sure does the job.

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