如何防止父div中输入元素的移位？

Question

我的div包含三个元素。

这是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>

div中的输入文本被移位。看看它的样子：

这是jsfiddle。

如何防止输入元素向下移动并使其适合父元素？

Answer 1

您只需将vertical-align: top;添加到输入字段：

#txtSearch {
  vertical-align: top;
}