javascript - 如何防止输入元素在父 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;
}