表單塊不會彼此堆疊

在我的表單中，我有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

來源

2017-03-05 ClassicError

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>

來源

2017-03-05 23:37:35

表單塊不會彼此堆疊

回答

相關問題