Question

<div class="subscribe__form--action--btn">
                        <form action="mailto:filiptrzmiel@gmail.com" method="post">
                            <div class="subscribe__action--active">
                            <input class="subscribe__input" type="email" id="emails" name="emails"
                                placeholder="Podaj e-mail">

                            <input type="button" class="subcribe__btn" name="subcribe__btn" value="Prześlij">
                        </div>
                        </form>
                    </div>
            </section>

演示（带 css）：https://codepen.io/FilipoV/pen/LYWgeVm

Answer 1

使用 box-sizing: border-box; 获得相同的高度，即使对于不同的内边距、内容和边框高度也是如此。
并将 display: flex 添加到包装 div 以将它们排成一行（在相同的 y 位置，没有间距）。

.subscribe__form--action--btn {
  display: flex;
  justify-content: center;
  align-items: center;
}

.subscribe__action--active {
  display: flex;
}

.subscribe__input {
  width: 280px;
  height: 60px;
  border-radius: 2rem 0 0 2rem;
  text-align: center;
  border: none;
  background-color: #000;
  box-sizing: border-box;
}

.subcribe__btn {
  width: 140px;
  height: 60px;
  border-radius: 0 2rem 2rem 0;
  font-size: 1.2em;
  border: none;
  margin-left: -4px;
  transition: 0.2s;
  background-color: #29bb89;
  box-sizing: border-box;
}

<div class="subscribe__form--action--btn">
  <form action="mailto:lorem@lorem.com" method="post">
    <div class="subscribe__action--active">
      <input class="subscribe__input" type="email" id="emails" name="emails" placeholder="Podaj e-mail">

      <input type="button" class="subcribe__btn" name="subcribe__btn" value="Prześlij">
    </div>
  </form>
</div>
</section>

Answer 2

添加这个 css 重置

* {
  box-sizing: border-box;
  
}

将 flex 移动到 subscribe__action--active

.subscribe__action--active{
   display: flex;
    justify-content: center;
    align-items: centre;  
}

按钮与输入电子邮件不均匀？

2 个答案: