表单元素低于预期。不知道为什么

Question

我正在努力建立一个drupal网站（http://dev.thompsonsurgical.com/），我无法弄清楚搜索项目在右上角的位置。我把一个带有1px边框的容器放在有问题的元素周围，以帮助说明问题。我无法弄清楚是什么让输入字段下降约5px。有人能指出我正确的方向吗？

Answer 1

这样做：

#edit-search-block-form--2 {
border: 1px solid #E8E8E8;
height: 18px;
margin-top: 0;
padding: 0;
vertical-align: top; // modified
}

Answer 2

我刚用萤火虫玩你的css，看起来这就是罪魁祸首：

.container-inline div, .container-inline label { display:inline }

如果我摆脱它并添加float:left它就会出现在顶部。由于其他html元素，它位于右侧。试着玩弄它，你就可以开始工作了

Answer 3

出于某种原因，您的<label>标记被隐藏或包裹您的输入，当我在Chrome的检查器中查看标签时，标签正在按下内容，您可以尝试相对定位输入并设置负数{{1}属性

Answer 4

这是由于基线默认垂直对齐，它让图像下方有一些空间。因此<input />只是与链接对齐。

为vertical-align:middle;和<img />元素添加<input />。