Question

TL; DR点击链接

我的输入元素处于警示状态并且拒绝工作。我已经删除了它以隔离变量，我发现了一些解决问题的方法，但我知道这里还有其他的东西......

根据SO指南的HTML和CSS：

<div class="fl half">
    <div class="input-wrap">
        <input />
    </div>
    <div class="input-wrap">
        <input />
    </div>
    <div class="clear"></div>
</div>
<div class="fr half">
    <div class="input-wrap">
        <input />
    </div>
    <div class="input-wrap">
        <input />
    </div>
    <div class="clear"></div>
</div>
<div class="input-wrap">
    <select>
        <option>Select</option>
    </select>
</div>

CSS：

.fl { float: left; }
.fr { float: right; }

.half { width: 50%; }

input { border: 1px solid black; }

.input-wrap { margin-bottom: 14px; position: relative; }

.clear { clear: both; }

Answer 1

.input-wrap div与输入重叠。因此，当您单击输入时，实际上是在点击.input-wrap，它就在它们之上。

原因是包含输入的.half div是浮动的。简单的解决方法是在你现有的css添加类'clear'到.input-wrap div上添加样式clear:both。

<div class="input-wrap clear">
    <select>
        <option>Select</option>
    </select>
</div>

请参阅http://jsfiddle.net/mafUh/1/

Answer 2

由于Musa的建议，将position: relative; z-index: 1;添加到input {}规则似乎有效。

http://jsfiddle.net/9PkYG/4/

然而，这似乎不是最好的解决方案，你可以在位置内没有输入元素：relative ???

忽略这个解决方案，我仍然在寻找更好的答案。这似乎是一个错误......为什么要删除select元素或删除浮点数会影响输入/换行的z-index？

Answer 3

你的div .input-wrap超过输入，删除位置：relative似乎把它放在输入后面。

.input-wrap { margin-bottom: 14px; }

http://jsfiddle.net/9PkYG/3/

Answer 4

关于这个问题：还值得注意的是，如果您尝试对非本地可聚焦元素进行focus，则可以尝试使用html属性tabindex使其可聚焦

无法聚焦（点击进入）html输入元素

4 个答案: