html - 表单元素以未设置的宽度中断

Question

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

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

1. 如果父元素没有设置宽度，则提交按钮将换行，据我所知（和目标），那么文本输入和提交按钮应保持在同一行。

2. 提交按钮在 Firefox 和 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:nowrapINPUT 保持在一行并font-size:0px去掉空格字符（通过将它们的大小设置为 0）。

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