如何将按钮与输入对齐

Question

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

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

Answer 2

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