對齊表單字段並在同一行上提交按鈕

Question

我覺得我確實缺少一些簡單的東西，但是我嘗試了很多事情，而且似乎無法將輸入框右側的Submit按鈕對准同一行。 它在文本框下方的下一行。

這來自一個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用於表單。

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

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

Answer 2

問題很簡單：您在輸入和按鈕周圍放置了一個div ！ div是一個塊元素（display是block），所以它會自動進入上一個元素！

解決方案有很多解決方案！

• 刪除div！ （如果您不需要它）

• 使用彈性盒

• 您可以使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;
}