无法获取带有文本框的按钮级别

Question

我有一个坐在提交按钮旁边的文本框，但由于某种原因，我无法让它们排队。我尝试添加一个负值边距，但浏览器似乎忽略了这一点。

我使用的HTML是：

<input type="text" id="toDoInput" /> 
<input type="submit" id="addToDo" value="" /> 

而CSS是：

#toDoInput { 
    background: #E6E6E6; 
    border: 0px; 
    border-bottom:3px solid #B1B1B1; 
    color:000; 
    font-family: Arial; 
    font-size:1.5em; 
    margin: 10px; 
    padding-left:5px; 
    height:42px; 
} 

#addToDo { 
    background:url(images/todo-input.jpg) #08a2f1 no-repeat center; 
    height:47px; 
    width:47px; 
    colour:#61c5f9; 
    border:0px; 
    margin-left:-14px; 
    cursor:pointer; 
    border-bottom:3px solid #0b90d4; 
} 

还有这里的问题的的jsfiddle：http://jsfiddle.net/v5DuN/

Answer 1

大多数时候，我想对齐内嵌块元素，我需要vertical-align: middle：

input { 
    vertical-align: middle; 
} 

Demo

^{其他vertical-align值也能正常工作，但。}