html - 一个 flex 元素的填充会影响其余的 flex 元素

<分区>

我有一个带有 2 个输入的 flex parent。一个 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%;
    }
}

最佳答案

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

关于html - 一个 flex 元素的填充会影响其余的 flex 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53580727/

上一篇：html - PHP : replace character – followed with several non breaking spaces in wordpress "the_content"

下一篇：html - 将两个按钮并排放置在 div 的右下角

相关文章：

javascript - 使用 jQuery 在预制/单独页面之间滑动

javascript - jQuery - 级联类和点击功能问题

html - Bootstrap 2.3.2 表单，对齐内联表单控件的宽度

html - 为什么 flex-shrink 在我的例子中会这样？

html - Img 以适应 div 使用 css 不拉伸(stretch)

jQuery 将长 ul 列表拆分为较小的列表

jquery - 使用 jQuery 按钮水平对齐带省略号的文本

javascript - 试图换行按钮和元素

css - 使用 Flexbox 实现 "Mondrian"模式

html - 为什么我的 html flex 代码只能在某些浏览器中工作？