表单元素以未设置的宽度中断答案

【问题标题】：A Form element is breaking with an unset width表单元素以未设置的宽度中断
【发布时间】：2012-10-20 14:08:26
【问题描述】：

我在为表单设置样式时遇到了麻烦。我创建了一个站点标头，该标头有 3 个“按钮”，它们都使用一个通用类，以及它们自己的一个，以便指定每个按钮下拉容器的宽度。

在第三个中，有一个没有设置宽度值的下拉列表（也尝试使用宽度自动），我正在放置一个表单，现在它有两个问题：

【问题讨论】：

【解决方案1】：

在包含您的搜索文本和按钮的表单上添加这些样式（最好在一个类中）：

white-space:nowrap;
font-size:0px;

white-space:nowrap 将 INPUT 保持在一行，font-size:0px 去除空白字符（通过将它们的大小设置为 0）。

您在 FF 和 Safari 中看到的“边距”实际上是一个空格字符...浏览器往往对如何以及何时呈现空白有不同的想法。

【讨论】：

谢谢，我已经更新了代码，你知道为什么 Firefox 现在将提交按钮向下推 1px 吗？使用 Safari，按钮和输入完美对齐
我再也看不到test-ground.tk/ex/example.html 上的搜索了。 FF 和 Safari 以不同的方式呈现按钮，可能就是这样。您可以尝试设置高度、行高、垂直对齐、填充、边距或边框来改变外观和定位。
我明白了。这很奇怪。我在 FF 中再次查看了您的网站。我可以在表单元素上使用 text-align:middle 让它看起来更好一些。
是的，它解决了 99% 的解决方案，我想我已经足够好了，再次感谢。