html - 无法垂直对齐 : text field with image in horizontal layout

Question

我正在尝试创建一个类似于 facebook 的搜索字段， 一个文本字段和一个带有用于搜索的搜索图像的按钮。

标记

    <div>
        <div style="width: 250px;">
            <input id="txtSearchPerson" type="text" style="width:150px;float:left;" />
            <img id="btnSearch" src="search.png" style="float:left;" />
        </div>
    </div>

这两个控件按照我的意愿水平对齐。

问题是输入(文本字段)右上角未与图像左上角对齐。

我可以用 jq 解决这个问题，但我应该用 CSS 来处理它。

我尝试使用“vertical-align”和其他我知道的属性，但没有成功。 我怀疑父容器，但仍然不能让它工作太久......

请协助。

提前致谢!

Answer 1

您可以在图像的顶部和图像的左侧添加填充，以使格式按预期对齐。

<div>
        <div style="width: 250px;">
            <input id="txtSearchPerson" type="text" style="width:150px;float:left;" />
            <img id="btnSearch" src="search.png" style="float:left;padding-top:.2em;padding-left: .1em;" />
        </div>
</div>

http://jsbin.com/umituz/2/edit