css - 将表单字段和提交按钮对齐在同一行

Question

我觉得我真的缺少一些简单的东西，但我已经尝试了很多东西并且似乎无法将输入框右侧的提交按钮对齐在同一行上。它位于文本框下方的下一行。

这来自一个 wordpress 插件，我可以在其中添加一些额外的 CSS，因此在我的 jfiddle 示例中没有提取某些 CSS，但我认为您拥有所需的东西。

HTML

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

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

CSS

.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;
}

https://jsfiddle.net/martonian/u41y9bng/2/

Answer 1

问题很简单:你在输入和按钮周围放置了一个 div!div 是 block 元素(显示是 block )，因此它会自动位于前一个元素之下!

解决方案有很多解决方案!

• 删除 div ! (如果你不需要的话)

• 使用 flexbox

• 您可以让您的 div 显示到 inline-block 或 inline element !

代码:

-删除 div:(仅更改 HTML)

<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>

-第二种解决方案:将 flex 添加到 CSS，只需将其添加到您的 css:他是一个链接:Flex Box

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

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

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