1

我正在构建一个所有内容都居中的登录框。我有一段文本、两个堆叠在一起的表单域和一个按钮。表单域具有相同的宽度，我只是通过在它们之间放置一个换行符 ( <br />) 来堆叠它们。

由于整个框都已text-align: center;应用于它，您会认为这两个表单字段会完全对齐，正确（一个在另一个顶部，两个边缘完美对齐，因为它们的宽度相同）？但是，在 Firefox 中，第二个表单域可能会向右移动 1 或 2 个像素。

这是什么原因造成的？断线本身是否占用了非常小的空间，因此会偏离中心？如果是这样，我该如何预防？

4

1 回答 1

1

首先，换行符不会在它周围的内容之前或之后创建任何间距，因此它不是导致间距问题的换行符。完整的代码示例将有助于检查以下内容，因为这确实有效并在 Firefox 中完美对齐它们：

<div style="text-align: center;">
  Some text<br />
  <input type="text" style="width: 150px;"><br />
  <input type="text" style="width: 150px;">
</div>

首先检查页面的文档类型。确保您正确声明它（xhtml 假设您正在关闭换行符）。除此之外，鉴于我假设你的换行符不是在它们之后间隔，你应该尝试剥离你的代码，直到你找到原因。您可以在其中一个输入框之前有一个不间断空格（请参阅http://www.htmlbasictutor.ca/non-break-space.htm，因为我不知道如何让 stackoverflow 写入该字符），这将移动它，或者你可以让一些 CSS 给其中一个留出余量。您可以在它们上方有一个浮动元素，它会侵占其中一个并将其移动。

如果所有其他方法都失败了，只需将它们放在自己的 div 中，而不是使用换行符。将某些内容包装在 div 中将具有相同的效果。你也可以明确：两者；在 div 上确保没有任何漂浮在它上面的东西影响它。

于 2011-07-29T16:18:29.700 回答