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

Question

我有一个两列的网格，其中的标题元素位于段落标签上方（左列），输入框位于提交按钮上方（右列）。我希望这些项目的左边缘对齐，并且由于某些原因它们不会对齐。我在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

alignment issue

Answer 1

您的按钮是inline-block元素，表示它受text-align的影响。在您的网站上，您的代码笔中可能不存在带有text-align: center的父元素。

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

您在Codepen中拥有的外观如下：

#form {
 text-align: left
}

（还要注意，在Codepen中，您的提交按钮为<input>，您可能希望将其设为<button）