Question

我有一个具有2个输入的flex父级。一个email输入和一个submit输入。

在email输入上，我设置了一些填充以移动placeholder文本。这样，email输入的高度将会增加（我所期望的），但是问题是submit输入高度也会增加。

为什么会发生这种情况，我该如何阻止呢？我希望submit输入的高度小于email输入的高度。

HTML：

<div class="footer__form">
        <input type="email" class="footer__form--email" placeholder="enter your email for updates">
        <input type="submit" class="footer__form--submit u-uppercase-text" value="sign up">
</div>

CSS：

 &__form {
    flex-basis: 49%;
    display: flex;
    justify-content: space-between;
    flex-direction: row;

     &--email {
      flex: 0 0 65%;
      padding: 1.5rem 1.5rem;
      }

    &--submit {
      flex: 0 0 30%;
    }
}

Answer 1

我被添加了align-items:center;。因为默认的align-items:是stretch

.footer__form {
    flex-basis: 49%;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items:center;
}
     .footer__form--email {
      flex: 0 0 65%;
      padding: 1.5rem 1.5rem;
      }

    .footer__form--email--submit {
      flex: 0 0 30%;
      font-weight: 700;

    }

<div class="footer__form">
        <input type="email" class="footer__form--email" placeholder="enter your email for updates">
        <input type="submit" class="footer__form--submit u-uppercase-text" value="sign up">
</div>

一个弹性项目的填充会影响其余弹性项目

1 个答案: