滑动图文区故障

Question

请帮助我滑动文本区域。如果我添加了错误字段的图标，我的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>标记是过时的--您应该使用页边距-左和右边距。

这是一个小提琴

​

.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

当然，元素会向左移动，因为当您放置图像时，新元素需要一些空间才能存在。因此，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。只要您专注于输入元素，就可以动态地放置"image“元素。