我认为 CSS 和浮动问题...表单元素未对齐答案

【问题标题】：CSS and float problem I think ... form elements mis aligned我认为 CSS 和浮动问题...表单元素未对齐
【发布时间】：2009-02-18 01:19:12
【问题描述】：

我已经使用 CSS 设置了我的表单。标签向左浮动，输入/文本区域向右浮动。它们对齐很好。

不过，我最近添加了一个带有复选框元素的块。出于某种原因，它上方出现了一个空白，我无法找到解决方案来解决。我怀疑这是一个浮动问题，但我无法弄清楚。总的来说，我很擅长 CSS。

（不再可见）

注意复选框块上方的额外空间...边框打开以帮助您了解 div 所在的位置。

那么有问题的 CSS 代码在哪里？

谢谢！

更新

在 Safari 中似乎没问题。

我正在 mac osx 上测试 firefox 3。

【问题讨论】：

标签： css forms

【解决方案1】：

这是因为您使用的是带有图例的字段集。传说将上边距推出。图例很难跨浏览器设置样式，实际上大多数浏览器除了字体颜色之外根本无法设置它们的样式。

查看此链接以查看关于样式图例元素的一些研究（带有跨浏览器屏幕截图）：legend styling

我建议您隐藏图例，并在字段集中包含一个额外的标签，以实现跨浏览器的优势。

【讨论】：

【解决方案2】：

我认为是这样的：

.option-row input {style.css (line 562)
display:block;
float:left;
width:10%;
}

Firebug 告诉我你的边界是重叠的。将该框的宽度减小到 8% 会起作用，但不确定是否能达到您想要的效果？

【讨论】：

【解决方案3】：

如果我没记错的话，选项行类中的复选框和标签都被定义为块级元素。尝试删除显示属性或将其设置为内联。

【讨论】：