html - 无法单击以关注/编辑 float 表单元素

Question

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

查看 example demonstrating the problem .

可以点击 float 输入框下方的文本区域来获得焦点并正常编辑。

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

是什么阻止了 float 输入在被点击时获得焦点？

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

Answer 1

我所要做的就是让文本区域也 float 。查看working sample .

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

未 float 的 textarea 的 div “覆盖” float 输入，防止在用鼠标单击时输入获得焦点。因此 another solution是更改“z-index”，使文本区域的 div 位于 float 输入下方。