如何防止输入元素在父div内移位？

Question

I have div that contains three elements.

Here is the div:

<div id="toolbarArea" class="toolbarArea" data-Owner="geomind" data-Date="11/2016"> 
                        <img id="toolbarTitle" width="15px" height="15px" src="../stdicons/threePoints.png">
                    <iframe id="frTools" style="width:400px;height:25px;overflow: hidden;" name="tbFrame" src="/data/mapview/toolbar.aspx?LOCALE=en" frameBorder="0"></iframe>

  <input type="text" id="txtSearch" placeholder="Sample Input"/>

</div>

The input text that inside div is shifted.Here how it looks:

Here is jsfiddle .

How can I prevent shift down of the input element and make it fit parent element?

Answer 1

You can just add vertical-align: top; to the input field:

#txtSearch {
  vertical-align: top;
}