Question

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

Answer 1

默认情况下，

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>

表格块不会相互堆叠

1 个答案: