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解决这个问题，但是我应该用它来处理它。

我尝试使用'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

不能垂直对齐：文本字段，水平布局中的图像

1 个答案: