如何将按钮与输入对齐答案

【问题标题】：how can I align button with inputs如何将按钮与输入对齐
【发布时间】：2016-11-21 11:43:49
【问题描述】：

那个。我如何将此按钮与输入对齐。我尝试使用百分比，但只在特定屏幕上工作。在这种情况下我使用的是 flexbox，我不知道是不是这样

.Contact-form{
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 1em;
    width: 45%;
}

.Contact-input{
    width: 90%;
    padding: .9em;
    border: 0;
}

.Contact-input:focus{
    outline: none;
}

.btn{
    width:  100%;
    background-color: #da2929;
    box-shadow: 0px 8px 1px #671212;
    color: white;
    font-size: 1.5em;
    font-weight: 700;
    padding: .5em;
}

<form action="" class="Contact-form">
  <input type="text" placeholder="Nombre" class="Contact-input" required="true">
  <input type="text" placeholder="Apellido" class="Contact-input">
  <input type="email" placeholder="correo@ejemplo.com" class="Contact-input" required="true">
  <input type="submit" value="Subscribeme" class="Contact-input btn">
</form>

【问题讨论】：

标签： html css responsive-design flexbox

【解决方案1】：

我通过在.Contact-input 上添加box-sizing: border-box; 解决了这个问题。我可能需要为每个浏览器添加必要的前缀。

【讨论】：

【解决方案2】：

假设您的输入按钮是 .btn，它的宽度为 100%，而您的文本输入的宽度为 90%，这就是存在差异的原因。

你可以通过这两种方式来处理 1) 完全从 .btn 和 .Contact-input 中删除宽度声明（这将允许它们都占据完整的 100% 宽度），或者 2) 将两个元素显式设置为具有相同的宽度

【讨论】：

当我将两者都放在宽度 100% image 时会发生这种情况，感谢@Jay 的帮助