Question

更新：已修复margin-bottom: 0px; 但不知何故，它仍会影响文本框的大小。大。
然后，如果我使用outline代替border，则边框半径将无效。

当其中一个元素被点击/聚焦时，我遇到了这些元素的问题，它会影响其他元素的位置。这是因为边框大于正常尺寸。那么如何解决呢？

例如：单击文本区域，它将使文本输入移开。注意：我不想使用box-shadow。实际上不需要使用位置属性。

HTML

<h3>Text Area</h3>
<textarea></textarea>
<br />
<h3>Input: Text</h3>
<input type="text" />

CSS

input{
  background: #fff;
  border: 1px solid #B7B7B7;
  font-size: 15px;
  margin: 2px 0;
  padding: 5px 5px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
}
input:focus, textarea:focus {
  border: 3px solid #507ad5;
  margin-bottom: 0px;
}
textarea {
  width: 300px;
  height: 100px;
}

更新：直接查看并测试：http://jsfiddle.net/hedaru/dSgxr/6/
这是它应该如何：goo.gl/jAojK

Answer 1

您的CSS指定聚焦元素大于相同元素的非聚焦版本。

添加border会物理增长元素。向元素的基础添加相同数量的边框像素（使用白色）或使用outline。

以下是我的修复：http://jsfiddle.net/g105b/dSgxr/2/

Answer 2

这是因为：

input:focus, textarea:focus {
  border: 2px solid #507ad5;
}

如果向边框添加另一个像素，则该元素将移动。

您应该将边框保持在1px并更改其颜色。

input:focus, textarea:focus {
  border: 1px solid #507ad5;
}

<强>更新：

使用边距而不是位置，它会将它固定在同一个地方，边框会围绕它“增长”。 Here's an example

CSS：

input:focus, textarea:focus {
  border: 2px solid #507ad5;
  margin-top: 0px;
  margin-left: -1px;
}

Answer 3

另一个选项（除了仅更改边框颜色）是添加一个边距，该边距会缩小与边框增长相同的量。请注意，边距必须足够大，以克服相邻元素的边缘崩溃。

Answer 4

也许你可以改变保证金的差异。现在看来元素的边缘底部是2px，所以当你在焦点上将它改为0px时，你可以补偿元素的增长。像这样：

input:focus, textarea:focus {
  border: 2px solid #507ad5;
  margin-bottom: 0px;
}

Answer 5

或者只是在焦点上添加“margin：0px”。只需确保margin + border在聚焦和未聚焦时使用相同的数字。

单击/聚焦时如何保持HTML元素对齐？

5 个答案: