html - 表格块不会彼此堆叠

This question already has answers here:

Prevent flex items from rendering side to side
                                
                                    （3个答案）
                                
                        
                                2年前关闭。
            
                    
在我的表单中，我有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; }

http://codepen.io/Shalahmander/pen/yMJmBZ?editors=1100

最佳答案

display: flex默认情况下将子元素排成一行。将flex-direction: column添加到您的form .input类中，以使它们显示在列中，即彼此堆叠。

body {
  background-color: yellow;
}

form {
    max-width: 450px;
    margin: 17% auto;
}
form .input {
    display: flex;
    flex-direction: column;
    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;
}

<form>
   <div class="input">
      <input type="text" class="button" id="email" name="email" placeholder="YOUR EMAIL"/>
      <br class="visible-xs">
      <input type="submit" class="button" id="submit" value="SUBSCRIBE"/>
   </div>
</form>

关于html - 表格块不会彼此堆叠，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42615310/