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

【问题标题】：How to adjust the size of the input component?如何调整输入组件的大小？
【发布时间】：2015-09-21 17:37:53
【问题描述】：

这是我正在尝试实现的 UI 原型

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

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

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

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

以及设置样式的 CSS 代码

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

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

【问题讨论】：

【解决方案1】：

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

通过将选择器修改为 .help_header:not(input)，从 input 中删除填充就可以了

【讨论】：

【解决方案2】：

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

【讨论】：