滑动文本区域的问题

Question

请帮助我滑动文本区域。如果我添加错误字段的图标，我的文本区域会向左移动。一些截图：

还有一些代码：

<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

当然，您的元素会向左移动，因为当您放置图像时，新元素需要一些 space 才能存在。因此 CSS 将您的输入元素向左推以腾出一些空间。

一个直接的答案是您需要预先定义您的元素将出现的位置并为它们保留 space。一种方法是将表单转换为 table 并固定 table 并为每个单元格分配宽度。以下示例。

由于您没有向我们提供 CSS，我做了一个样本 JSFIDDLE，它可能看起来与您的不完全相同，但很接近。

您会注意到：当您单击输入框时，会出现一个带有一些文本 "icon" 的新元素，但它不会将元素向左移动。相反，它从右边开始 space。

所以我在这里做了什么：

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

我已经把你的表格变成了 table 并且给了它一个不能超过的宽度。我也告诉元素他们只能拿'x'数量的space并且不能碰另一个。

不用担心 javascript。只要您关注输入元素，它就可以动态放置 "image" 元素。

Answer 2

<center> 标签已过时 - 您应该改用 margin-left 和 margin right

这是一个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>

滑动文本区域的问题

Trouble with sliding textarea

html

css

textarea

HTML

CSS