时间戳

首页 > 解决方案 > 将对象下方的元素与上方的元素对齐

html - 将对象下方的元素与上方的元素对齐

问题描述

我有一个两列网格，其中包含段落标记上方（左列）的标题元素和提交按钮上方（右列）的输入框。我希望这些项目的左边缘对齐，但由于某种原因它们不会。我在 margin-left:0px 处拥有所有元素的 margin-left; 由于某种原因，该按钮在 codepen 上显示为对齐，但在网站上却没有。

.latest-from-aer .input-email {
 position: absolute;
 z-index: -1;
 margin-left: 0px;
 }

https://codepen.io/holmedw/pen/KrvJEb?editors=1100

对齐问题

标签： htmlcss

解决方案

您的按钮是一个inline-block元素，这意味着它受text-align. 在您的网站上，可能有一个父元素text-align: center在您的 codepen 上不存在。

添加text-align: left到包装 div 它可能会解决您的问题。

正如您在 codepen 中所拥有的那样，它看起来像：

#form {
 text-align: left
}

（另请注意，在 codepen 中，您的提交按钮为<input>，您可能希望将其设为 a <button）

推荐阅读