html - 将列网格中的元素相互左对齐

Question

有一个 id="contact" 部分，我试图在其中的一列下方放置一个标题和一个简短的一句话描述，并在其中的输入字段下方放置一个带有提交按钮的电子邮件提交表单右栏。我希望电子邮件输入元素覆盖整个右列，并将按钮左对齐到它下方的边缘。我有一个草图来显示我正在寻找的附件。

到目前为止，这个部分做了我现在想要它做的所有事情，但是底部元素下的顶部元素没有左对齐，尽管类元素 .latest-from-here .input-email (嵌套在父部分 #contact 内)是 justify-self:start; self 对齐:居中；。

https://codepen.io/holmedw/pen/KrvJEb

素描:

 #contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: left;
    grid-column-gap: 80px;
    margin-left: 80px;
    margin-right: 80px;
    height: 480px;
    align-items:center;
}

.latest-from-here .input-email {
    position:relative;
    z-index: -1;
    justify-self:start;
    align-self: center;
}

Answer 1

如果你删除了 justify-items: left;在#contact 中添加 width:100% 到您的输入字段，这将解决问题。

*{
box-sizing:border-box
}
#contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 80px;
    margin-left: 80px;
    margin-right: 80px;
    height: 480px;
    align-items:center;
}

.latest-from-here .input-email {
    position:relative;
    z-index: -1;
    justify-self:start;
    align-self: center;
}

.email{
width:100%

}

<section id="contact">
              <div class="latest-from-here">
                <h2>Get the latest from Aer</h2>
                <p>Don't miss out on new arrivals, offers and events.</p>
              </div>

              <div class="input-email">
                <form id="form" action="https://www.freecodecamp.com/email-submit">
                  <input name="email" id="email" type="email" placeholder="Enter your email" class="email" required/>
                  <div></div>
                  <input id="submit" type="submit" value="Submit" class="btn-submit"></input>                
              </form> 
              </div>
            </section>