Dev Faq
0
votes

Comment aligner les icônes dans la zone de texte dans réagir JS?

J'ai besoin de placer l'icône de courrier et l'icône de mot de passe dans la zone de texte, comment aligner correctement les éléments

besoin de ce

j'ai eu ceci

mon code JS est le suivant: xxx

2 commentaires

Si votre but est seulement de faire comme ça, vous pouvez utiliser bibliothèque ui comme andd .

Si vous souhaitez centrer et aligner le contenu dans un conteneur. Je vous recommanderais d'utiliser CSS Flex Box. Soit créer un style intégré à l'intérieur de réagir ou importer un index.css. / code>.

3 Réponses :

0
votes

Vous pouvez utiliser les positions CSS pour atteindre cet objectif ( HTTPS: / /developer.mozilla.org/en-us/docs/web/css/position ) xxx

1 commentaires

son partiellement ok mais la ligne entre l'icône et la boîte d'entrée est manquante

0
votes 

<div class="row">
  <div class="icon">
    <img src="https://www.iconninja.com/files/618/860/906/internet-google-message-gmail-computer-email-icon.svg" alt="">
  </div>
  <input type="text" placeholder="Email/Username">
</div>
<div class="row">
  <div class="icon">
    <img src="https://www.iconninja.com/files/618/860/906/internet-google-message-gmail-computer-email-icon.svg" alt="">
  </div>
  <input type="text" placeholder="Password">
</div>

0 commentaires
0
votes

Vous pouvez utiliser Flexbox pour la mise en page xxx

et flexbox de type doit être comme ci-dessous xxx

0 commentaires

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO