html - 无法单击以聚焦/编辑浮动表单元素

Question

我正在使用Zurb Foundation 的 Grid来布置表格。当我浮动前几个文本并选择输入以将它们布置在 2 列中时，我无法单击它们来编辑它们。请注意，我可以通过输入选项卡来编辑它们。

查看演示问题的示例。

可以单击浮动输入下方的文本区域进行聚焦和正常编辑。

当我float: left;从form#Form_Form div.field.text, form#Form_Form div.field.dropdown所有元素中删除时，可以正常编辑。

是什么阻止了浮动输入在单击时获得焦点？

经过一番调查，我发现了原因 - 希望以下答案能帮助其他遇到同样问题的人。

Answer 1

我所要做的就是让 textarea 也浮动。请参阅工作示例。

form#Form_Form div.field.textarea {
    ...
    float: left;
    // clear: both;  // clearing also worked.
}

未浮动的 textarea 的 div 正在“覆盖”浮动输入，防止输入在单击鼠标时获得焦点。因此，另一种解决方案是更改“z-index”，使 textarea 的 div 低于浮动输入。