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

Question

这是我要实现的 UI 原型

这是我目前拥有的：JSFiddle 以及我目前的布局

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

这里是输入组件的HTML代码
（我将 colspan 设置为 3，以便输入范围从 "Contact Us" 到美国国旗。）

<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

您可以使用字体大小和行高属性。或者设置overflow:hidden，这样就可以使用height属性了。有关于这个主题的好文章 http://www.sitepoint.com/style-web-forms-css/

Answer 2

.help-header 的填充给 <input> 高度带来了一些麻烦。

通过将选择器修改为 .help_header:not(input)

，从 input 中删除填充就成功了

How to adjust the size of the input component?