麻煩滑動textarea的

Question

請幫助我與滑動textarea的。如果我添加了錯誤字段的圖標，我的textarea就會離開。一些截圖：

而且一些代碼：

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

代碼時，圖標顯示：

<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>標籤是過時的 - 你應該使用保證金左和右緣，而不是

這裏是一個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到離開，因爲你的元素將移動當你把你的形象，新的元素需要爲自己的存在留下了一些空間。因此，CSS會將輸入元素向左移動以騰出空間。

一個簡單的答案是，你需要預先定義您的元素將出現，並有爲其保留的空間。一種方法是將表單轉換爲表格並固定表格並將寬度分配給每個單元格。下面的示例。

因爲你沒給我們提供CSS，我做了一個樣本JSFIDDLE可能不完全一樣，但你的親密。

您會注意到： 當您單擊輸入框時，會出現一個帶有文本「圖標」的新元素，但它不會將元素向左移動。相反，它佔用了空間。

那麼你有什麼我這裏做：

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

我使你的形式到一個表，並給它的寬度不能超過。我也告訴過這些元素，他們只能用'x'的空間而不要碰另一個。

不要擔心的JavaScript。它只是在您關注輸入元素時動態放置「圖像」元素。