html - 按钮与输入电子邮件不均匀?
问题描述
<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
解决方案
用于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>
推荐阅读
- java - 如何使用 Scanner 读取包含空格的字符串输入并用 Java 打印出来?
- javascript - ES6 将整个对象解构为 this
- javascript - 我如何才能获得一个新的json,只有原始值的唯一值
- azure - 如何使用客户端应用程序获取的令牌对 Web API 进行身份验证以调用 Graph API
- python-3.x - 如何在彼此内部自动定义 m 个循环以生成具有所有唯一组合的 ^m 行表?
- c# - 缺少 using 指令
- vb.net - 通过串行接收完整的字符串
- intellij-idea - 在 IntelliJ 中创建许多单元测试?
- python - 根据数据框列的部分添加一列标准化值
- mysql - MySQL:在一个语句中混合 SET @variable 和 SELECT