使按钮具有与输入相同的大小答案

【问题标题】：Make button has same size as inputs使按钮具有与输入相同的大小
【发布时间】：2016-09-16 00:36:22
【问题描述】：

我的表单带有输入/选择和一个按钮。

如果 Button 是 <button/>，那么我在 FF 浏览器中的大小有问题（它比输入大）。

如果 Button 是 <input/>，那么我的按钮文本有问题（我无法将它设置为所有浏览器的按钮中间）。

这是示例（<button> 和 <input>）

EXAMPLE

【问题讨论】：

请不要使用内联 CSS。混合外部 CSS 和内联 CSS 更糟糕。它不可读，很难了解您的样式发生了什么。
@TJ，对不起...

标签： html css firefox button input

【解决方案1】：

您好，按钮使用填充而不是高度：

.form-search input.search-input, .form-search select.search-input, form input.search-input, form select.search-input {
    padding:  0 20px 0 20px;
    margin: 3px 0;
}

【讨论】：

您使用没有样式的默认输入，因此无论如何它们在不同的浏览器中看起来会有所不同，我给您的上述 sn-p 代码修复了 size* 问题。

【解决方案2】：

这是我在使用不同浏览器时遇到的常见问题。您可以使用jQuery 来确定浏览器是否为FireFox，使用引用css，如果浏览器是Chrome 或Safari，则使用另一个css，以满足您的要求。

【讨论】：