Form元素以未设置的宽度打破

Question

我在设计表单时遇到了麻烦。 我创建了一个站点标题，该标题有3个“按钮”，所有这些按钮都使用一个泛型类，并且它们之一用于指定每个按钮下拉容器的宽度。

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

1. 如果没有为父元素设置宽度，则提交按钮将从我所知道的（并且瞄准）中断到新行，然后文本输入和提交按钮应保持在同一行中。

2. 提交按钮会在Firefox＆amp;中添加不同的保证金。 Safari（两者都在MAC上） 为什么会这样，有没有办法统一所有浏览器的外观？

图片：http://test-ground.tk/ex/snap.png

实例：http://test-ground.tk/ex/example.html

Answer 1

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

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

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

你在FF和Safari中看到的'边距'实际上是一个空格字符...浏览器往往对如何以及何时渲染空白区域有不同的想法。