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

我首选的解决方案是使用flexbox表单。

＆＃13;

form {
  display: flex;
  align-items: center; /* Vertical alignment */
}

.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;
}

＆＃13;

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

＆＃13;

Answer 2

问题很简单：你在输入和按钮周围放了一个ArrayList！ div是一个块元素（显示为块），因此它将自动进入前一个元素！

<强>解决方案有很多解决方案！

删除div！（如果你不需要的话）
使用弹性框
您可以将div显示为div或inline-block！

<强>代码：

- 删除div :(仅更改HTML）

inline element

- 第二个解决方案：向CSS添加flex，只需将其添加到css中：他是一个链接：Flex Box

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

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

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

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

2 个答案: