0

我正在尝试创建一个类似于 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 来处理它。

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

请协助。

提前致谢！

4

1 回答 1

0

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

<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

于 2013-01-17T14:06:53.660 回答