<分区>
在我的表单中，我有 2 个输入按钮。每个都有 100% 的宽度，所以它们应该相互堆叠，但它们没有。它们的宽度为 50%。为什么？
HTML
<form>
<div class="input">
<input type="text" class="button" id="email" name="email" placeholder="YOUR EMAIL"/>
<input type="submit" class="button" id="submit" value="SUBSCRIBE"/>
</div>
</form>
CSS
body {
background-color: yellow;
}
form {
max-width: 450px;
margin: 17% auto; }
form .input {
display: flex;
align-items: center; }
form .input:focus {
outline: none;
outline: 2px solid #E86C8D;
box-shadow: 0 0 2px #E86C8D; }
form .button {
height: 44px;
border: none;
width: 100%; }
form #email {
background: #FDFCFB;
font-family: inherit;
color: #737373;
letter-spacing: 1px;
text-indent: 5%;
border-radius: 5px 0 0 5px; }
form #submit {
height: 46px;
background: #E86C8D;
font-family: inherit;
font-weight: bold;
color: inherit;
letter-spacing: 1px;
border-radius: 0 5px 5px 0;
cursor: pointer;
transition: background 0.3s ease-in-out; }
form #submit:hover {
background: #d45d7d; }