如何调整输入组件的大小？

Question

这是我试图实现的UI原型

以下是我目前所拥有的内容：JSFiddle以及我目前的布局

我正在尝试调整输入组件的大小，使其与UI /搜索图标中的高度相匹配。

这是输入组件的HTML代码
（我将colspan设置为3，以便输入将从＆＃34;联系我们＆＃34;到美国国旗。）

<td colspan="3"><input class="help_header" type="text" /></td>

用于设计样式的CSS代码

input {
    background-color:white;
    padding: 0px;
    height: 1px;
    vertical-align:bottom;   
}

在这种情况下，有谁知道如何调整输入组件的高度？我尝试将height属性设置为1px但是没有做任何事情。我也尝试将它与搜索图标的底部垂直对齐，但也没有做任何事情。

Answer 1

来自.help-header的填充值会使<input>高度出现问题。

通过将选择器修改为input

，从.help_header:not(input)删除填充功能。

<强> Fiddle

Answer 2

您可以使用font-size和line-height attrs。或者设置overflow：hidden，这样就可以使用height属性了。有关这个主题的好文章http://www.sitepoint.com/style-web-forms-css/