时间戳

首页 > 解决方案 > 一个弹性项目的填充影响其余弹性项目

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

问题描述

我有一个带有 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%;
    }
}

标签： htmlcssflexbox

解决方案

我被添加了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>

推荐阅读