TL;DR haga clic en el enlace

Mi los elementos de entrada están en huelga y se niegan a trabajar. Me he despojado de este hacia abajo para aislar las variables, y he encontrado un par de cosas que solucionar el problema, pero sé que hay algo más aquí…

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

HTML y CSS por LO directrices:

<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 Comentarios

  1. 5

    El .entrada-wrap div es la superposición de las entradas. ASÍ que, cuando usted haga clic en las entradas, de hecho solo clic .entrada-envoltura que está por encima de ellos.

    La razón es que el .la mitad de divs que contienen las entradas son flotantes.
    Fácil solución sería añadir estilo clear:both en que css existente agregar la clase «clear».entrada-wrap div.

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

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

    • ahh! Yo a ver.. era el fondo del div de la superposición de la parte superior. Musa tenía la idea correcta, pero hay muchos .de entrada envuelve y no vi que era el fondo que cubra la parte superior (a causa de un flotador de compensación problema)
  2. 2

    La adición de position: relative; z-index: 1; a la input {} regla parecía funcionar, gracias a la Musa de la sugerencia.

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

    Sin embargo, esto no parece la mejor solución, no se puede tener elementos de entrada dentro de la posición relativa???

    Haciendo caso omiso de esta solución, todavía estoy en busca de una mejor respuesta. Este parece un error… ¿por Qué eliminar el elemento select, o la eliminación de la flota, el efecto de la z-index de las entradas/wrap?

  3. 1

    Su div .entrada-wrap es sobre la entrada, la eliminación de posición: relación parece poner detrás de las entradas.

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

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

    • pero necesito el pos: rel; así que puedo pos: abs algo más dentro de la entrada-wrap
    • ¿Por qué no poner las entradas en que div?
  4. 0

    En relación a la pregunta: vale la pena notar también que si usted está tratando de focus en un no-nativa elemento seleccionable, puede probar a usar el atributo html tabindex hacer es seleccionable.

Dejar respuesta

Please enter your comment!
Please enter your name here