L'élément Inline-Block est suspendu à l'effet Hover?

J'essaie de configurer un effet d'animation extrêmement basique dans lequel planer sur un div anime un élément form à côté de 0 à 100% width en utilisant une transition CSS. Here is a fiddle for reference. Je rencontre deux problèmes: d'abord, dans ce cas, l'élément <p> et les éléments <form> ne s'alignent pas verticalement, bien qu'ils soient définis sur display:inline-block et vertical-align:top. Deuxièmement, en survolant en élargissant l'élément form à 100%, il passe en dessous de l'élément <p>; Est-ce que quelqu'un sait ce qui se passe ici?L'élément Inline-Block est suspendu à l'effet Hover?

#wrapper { 
 
     display: inline-block; 
 
     position: absolute; 
 
     top: 0; 
 
     left: 0; 
 
     text-align: left; 
 
     vertical-align: top; 
 
     border: 1px solid #000; 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 
    #wrapper p { 
 
     font-size: 16px; 
 
     display: inline-block; 
 
     vertical-align: top; 
 
     text-transform: uppercase; 
 
     background-color: rgba(255, 255, 255, 0.5); 
 
     padding: 0.5em 1em; 
 
     cursor: pointer; 
 
    } 
 
    #wrapper:hover form#access { 
 
     width: 100%; 
 
    } 
 
    form#access { 
 
     display: inline-block; 
 
     width: 0%; 
 
     margin: 0; 
 
     padding: 0; 
 
     overflow:hidden; 
 
     -webkit-transition: width 1s ease-in-out; 
 
     -moz-transition: width 1s ease-in-out; 
 
     -o-transition: width 1s ease-in-out; 
 
     transition: width 1s ease-in-out; 
 
    } 
 
    form#access input { 
 
     font-size: 18px; 
 
     display: inline-block; 
 
     vertical-align: top; 
 
     padding: 0; 
 
     margin: 0; 
 
     border: none; 
 
     max-width: 100px; 
 
    }

<div id="wrapper"> 
 
     <p>Enter code:</p> 
 
     <form id="access"> 
 
     <input placeholder="code" id="access-code" name="access-code" type="text" tabindex="1" required> 
 
     </form> 
 
    </div>

Source

2017-07-26 nickpish

Que diriez-vous quelque chose d'un peu différent comme ça? https://jsfiddle.net/8bbop1w5/14/ –

Si vous souhaitez que le formulaire reste au-dessus de l'élément 'p', il doit être placé avant. La 'marge' sur' p' empêche l'alignement vertical, j'ai remarqué que vous n'avez pas 'vertical-align' déclaré sur votre' # access' non plus. Si vous avez besoin que ces éléments restent côte à côte, ils doivent être affichés en tant qu'éléments 'inline-block'. – UncaughtTypeError

vous configurez votre formulaire pour une largeur de 100% sur le vol stationnaire, qui prendrait toute la largeur de son parent. Vous pouvez réduire ce pourcentage afin qu'il tienne sur une seule ligne du paragraphe, ou tout simplement ajouter à ce #wrapper:

white-space: nowrap;

Source

2017-07-26 16:00:17

Parce que vous définissez form#access à 100% qui a besoin toute la largeur de la #wrapper container.

Cela devrait fonctionner à la place:

#wrapper:hover form#access { 
    width: 100px; 
}

Pensez également à utiliser display: inline-flex sur l'emballage de sorte que vous n'avez pas besoin de mettre display: inline-block et il est plus facile de centrer les deux éléments.

Je mis à jour votre fiddle here

Source

2017-07-26 15:59:40 lumio

L'élément Inline-Block est suspendu à l'effet Hover?

Répondre

Questions connexes