Css 在同一行上对齐表单字段和提交按钮

我觉得我真的错过了一些简单的东西，但我尝试了很多方法，似乎无法将输入框右侧的submit按钮对齐到同一行。它位于文本框下方的下一行

这来自一个wordpress插件，我可以在其中添加一些额外的CSS，因此在我的JFIDLE示例中没有使用一些CSS，但我认为您已经具备了所需的功能

HTML

---

问题很简单：在输入和按钮周围放置一个

div

！ div是一个块元素（display是block），因此它将自动置于上一个元素之下

解决方案 有很多解决方案

• 拆下div！（如果您不需要它）

• 使用弹性盒

• 您可以将div显示为

  内联块

  或

  内联元素

代码：

-删除div：（仅更改HTML）

-第三种解决方案：更改div的显示；将此代码添加到css

.tnp-field ,.tnp-field {
  display:inline-block;
}

---

我更喜欢的解决方案是在表单中使用

flexbox

表单{
显示器：flex；
对齐项目：居中；/*垂直对齐*/
}
.tnp订阅{
字体大小：13px；
显示：块；
利润率：15px自动；
最大宽度：500px；
宽度：100%；
}
.tnp订阅输入.tnp-submit{
背景色：#6acbdc；
;
颜色：#fff；
宽度：自动；
高度：自动；
}

.tnp-subscription {
    font-size: 13px;
    display: block;
    margin: 15px auto;
    max-width: 500px;
    width: 100%;
}

.tnp-subscription input.tnp-submit {
    background-color: #6acbdc;;
    color: #fff;
    width: auto;
    height: auto;
}

<div class="tnp tnp-subscription">
<form method="post" action="http://www.buffettworld.com/bw18/?na=s" 
onsubmit="return newsletter_check(this)">

<input class="tnp-email" type="email" name="ne" placeholder="Enter your e- 
mail address" required>
<input class="tnp-submit" type="submit" value="Subscribe">
</form>
</div>

form{ /* it means all the elements inside form will be set one next to one */
  display:flex;
}

.tnp-field ,.tnp-field {
  display:inline-block;
}