html - 无法聚焦(点击进入)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 是 float 的。简单的解决方法是在现有的 css 上添加样式 clear:both，将类“clear”添加到 .input-wrap div。

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

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