Problème avec la zone de texte glissante

Question

Aidez-moi s'il vous plaît avec glisser textarea. Si j'ajoute l'icône du mauvais champ, mon textarea va à gauche. Quelques captures d'écran:

Et un code:

<div class="signup"> 
<center> 
    <h1>Форма регистрации</h1> 
    <p>Для получения информации и участия в акциях информация должна быть правдивой</p> 


    <form name="registerform"> 
     <p> 
      <input type="text" placeholder="Ваше имя" id="user_login" class="input" size="20" /> <span id="user_login_result"></span> 
     </p> 

     <p> 
      <input type="email" placeholder="Ваш Email" id="user_email" class="input" size="20" /> <span id="user_email_result"></span> 
     </p> 
    </form> 

</center> 
</div> 

css:

#user_login.input, #user_email.input { 
    border: 1px solid #ccc; 
    width: 50%; 
    border-radius: 0; 
} 

code lorsque l'icône indique:

<p> 
<input type="text" placeholder="Ваше имя" id="user_login" class="input" size="20" /> <span id="user_login_result"><img src="un-available.png" /></span> 
</p> 

Answer 1

<center> balises sont obsolètes - vous devez utiliser la marge gauche et la marge droite à la place

ici est un jsfiddle

.signup { 
 
    width: 100%; 
 
} 
 
#user_login.input, 
 
#user_email.input { 
 
    border: 1px solid #ccc; 
 
    width: 50%; 
 
    border-radius: 0; 
 
} 
 
h1, 
 
.text { 
 
    text-align: center; 
 
} 
 
form { 
 
    margin-left: 24%; 
 
    margin-right: 24%, text-align: center; 
 
}

<div class="signup"> 
 

 
    <h1>Форма регистрации</h1> 
 
    <p class="text">Для получения информации и участия в акциях информация должна быть правдивой</p> 
 

 

 
    <form name="registerform"> 
 
    <p> 
 
     <input type="text" placeholder="Ваше имя" id="user_login" class="input" size="20" /> <span id="user_login_result"><img src="http://www.iberia.com/ibcomv3/rbrand/img/content/ico-x.gif" width="10px" height="10px"></span> 
 
    </p> 
 

 
    <p> 
 
     <input type="email" placeholder="Ваш Email" id="user_email" class="input" size="20" /> <span id="user_email_result"></span> 
 
    </p> 
 
    </form> 
 

 

 
</div>

Answer 2

Ofcourse votre élément se déplace à gauche parce que quand vous mettez votre image, le nouvel élément a besoin s un espace pour sa propre existence. Par conséquent, CSS pousse votre élément d'entrée à gauche pour faire de la place.

Une réponse simple est que vous devez prédéfinir où vos éléments apparaîtront et que l'espace leur sera réservé. L'one-way est de convertir votre forme en table et de rendre votre table fixe et assigner la largeur à chaque cellule. Échantillon ci-dessous.

Puisque vous ne nous avez pas fourni de CSS, j'ai fait un échantillon JSFIDDLE qui pourrait ne pas ressembler exactement à la vôtre mais à sa fin.

Vous remarquerez que: Lorsque vous cliquez sur la zone de saisie, un nouvel élément avec du texte "icône" apparaît, mais il ne déplace pas l'élément vers la gauche. Au lieu de cela, il prend de l'espace de droite.

Alors qu'ai-je fait ici:

HTML

<div class="signup"> 
<center> 
    <h1>Форма регистрации</h1> 
    <p>Для получения информации и участия в акциях информация должна быть правдивой</p> 

    <table> 
    <form name="registerform"> 
     <p> 
      <tr><td> 
      <input type="text" placeholder="Ваше имя" id="user_login" class="input first" size="20" /> <span id="user_login_result"></span> 
       </td></tr> 
     </p> 

     <p> 
      <tr><td> 
      <input type="email" placeholder="Ваш Email" id="user_email" class="input first" size="20" /> <span id="user_email_result"></span> 
       </td></tr> 
     </p> 
    </form> 
    </table> 

</center> 
</div> 

CSS

table { 
     table-layout: fixed; 
     width: 200px; 
} 

table .first { 
    width: 60%; 
    display: inline-block; 
} 

table .second { 
    width: 20%; 
    display: inline-block; 
} 

J'ai fait votre formulaire dans une table et ont donné une largeur qui ne peut pas dépasser. J'ai également dit aux éléments qu'ils ne peuvent prendre que «x» quantité d'espace et ne touchent pas l'autre.

Ne vous inquiétez pas pour le javascript. C'est juste là pour mettre dynamiquement l'élément "image" dès que vous vous concentrez sur l'élément d'entrée.