4

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; }
4

4 に答える 4

6

.input-wrap div が入力と重なっています。SO、入力をクリックすると、実際にはそれらの上にある .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/を参照してください

于 2013-08-08T19:55:27.947 に答える
3

Musa の提案のおかげで、ルールposition: relative; z-index: 1;への追加は機能しているように見えました。input {}

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

ただし、これは最善の解決策とは思えません。position: relative 内に入力要素を含めることはできませんか???

この解決策を無視して、私はまだより良い答えを探しています。これはバグのようです...選択要素を削除したり、フロートを削除したりすると、入力/ラップのz-indexに影響するのはなぜですか?

于 2013-08-08T19:52:51.673 に答える