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

【问题标题】：How to keep the HTML element aligned when clicked/focused?单击/聚焦时如何保持 HTML 元素对齐？
【发布时间】：2011-05-27 00:47:31
【问题描述】：

更新：已用margin-bottom: 0px; 修复但不知何故，它仍然会影响文本框的大小。更大。
那么如果我使用outline 而不是border，边框半径将不起作用。

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

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

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

【问题讨论】：

悬停时没有任何反应。你的意思是点击了吗？
对不起。是的，点击了。
确保输入的边框宽度和 Input:foucs 相同
@kst 请注意，这不应该是与正常状态相同的边框样式。

标签： html css border margin

【解决方案1】：

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

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

这是我的解决方法：http://jsfiddle.net/g105b/dSgxr/2/

【讨论】：

但不受边界半径的影响。不喜欢圆角，所以我用了边框。

【解决方案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;
}

【讨论】：

我知道。但我不希望它仍然是 1px，而是 2px 或更多。
它有效。但为什么它仍然影响大小？它会更大。它应该是这样的：goo.gl/jAojK。但是想要更好，就像普通按钮一样不改变边框大小。
正如我们已经解释过的，使用边框会使元素变大。如果您不想使用边框，请改用轮廓。
可以，但轮廓不受边框半径的影响。它使方形样式没有圆角。这就是为什么。那么，还有什么其他方法可以在元素之外制作边框但不放大它？
老实说，我认为您不会找到其他解决方案。这工作正常。

【解决方案3】：

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

【讨论】：

【解决方案4】：

也许您可以更改边距的差异。现在元素的底部边距似乎是 2px，因此当您将焦点更改为 0px 时，您可以补偿元素的增长。像这样：

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

【讨论】：

【解决方案5】：

或者只是在焦点上添加“margin：0px”。只需确保边距+边框在聚焦和不聚焦时产生相同的数字。

【讨论】：

是的，它有效。但不知何故，它会影响文本框的大小。更大。