无法聚焦(点击进入)html输入元素

Question

TL; DR单击链接

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

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

根据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是浮动的.简单的解决方法是clear:both在你现有的css上添加样式,将'clear'添加到.input-wrap div.

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

见http://jsfiddle.net/mafUh/1/