Question

我有一个表单，每次输入获得焦点时，都会显示此提示并告诉用户应该做什么（“指定8位密码”等等。）

问题是，每次出现时，由于尺寸的原因，输入的边距会变大或变小（取决于提示的大小）。我希望输入保持原样，而不是每次都相互进一步。

这是提示的css部分（标记为p元素）。

p {
margin: 0px 0 0 0;
background-color: rgba(0, 0, 0, 0.1);
border: 2px solid #5cb85c;
border-radius: 5px;
padding: 3px;
padding-left: 8px;
padding-right: 8px;
color: white;
box-shadow: 10px 10px 9px -5px rgba(0,0,0,0.2);
box-shadow: inset 0px 0px 0px 2px rgba(255,255,255,0.9);
width: 350px;
text-align: center;}

我想不出要发布的更多必要的代码部分，如果您需要，请告诉我。

提前感谢您的答案。

我的HTML：

 <table class="innertable">
    <tr>
      <td width="200px">
                                            Character Name:
      </td>
      <td>
      <input type="text" name="name" id="name" placeholder="Firstname_Lastname" class="form-control" class="col-md-3" value="">

     </td>
     <td>
     <p id="nameHint" class="hint">Please specify a username using A-Z letters only, in a Firstname_Lastname format</p>
     </td>
 </tr>
 <tr>
     <td>
                                            Password:
    </td>
    <td>
                                            <input type="password" name="password" id="password" class="form-control">
    </td>
    <td>
    <p id="passHint" class="hint">Please specify an 8 digits password</p>
    </td>
    </tr>
  <tr>
    <td>
                                        Verify Password:
    </td>
    <td>
    <input type="password" name="password_verify" id="password_verify" class="form-control" value="">
    </td>
    <td>
    <p id="verifyHint" class="hint">Please specify your password again, for verification</p>
    </td>
  </tr>
  <tr>
    <td>
    Age:
    </td>
    <td>
    <input type="text" name="age" id="age" class="form-control" value="">                                 
   </td>

Answer 1

您需要留出足够的空间来显示提示，或者提示为position：absolute;和z-index：10（任何高于1的东西都会这样做）并将它放在相关输入附近。如果没有看到您的HTML，我就无法提供更好的建议。

现在我看到了你的HTML，我相信你可以通过手动设置输入列的宽度来解决它：

<td width="200px">
    <input type ...
</td>

Answer 2

尝试添加：

box-sizing: border-box;

Answer 3

您需要将position:relative;添加到表格，并将position:absolute;添加到p元素。这就是p相对于表。因此，您可以使用top, left, right, bottom属性来观察它。小提琴：http://jsfiddle.net/v62rbdLz/

代码：

table {
  position: relative;
}
p {
  position: absolute;
}
#nameHint {
  top: 0px;
}
#passHint {
  top: 50px;
}
#verifyHint {
  top: 80px;
}

现在你应该小心并仔细检查值，这样布局就不会制动。

如何使元素不扩展他人的边缘

3 个答案: