[英]Align form field and submit button on same line
I feel that I'm really missing something simple, but I have tried many things and can't seem to align the submit button on the right side of the input box on the same line. 我觉得我确实缺少一些简单的东西,但是我尝试了很多事情,而且似乎无法将输入框右侧的Submit按钮对准同一行。 It is on the next line below the text box.
它在文本框下方的下一行。
This comes from a wordpress plugin where I can add some additional CSS, so some of the CSS isn't being pulled in my jfiddle example, but I think you have what you need. 这来自一个wordpress插件,我可以在其中添加一些其他CSS,因此在我的jfiddle示例中并未提取某些CSS,但是我认为您拥有所需的东西。
HTML 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 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/ https://jsfiddle.net/martonian/u41y9bng/2/
My prefered solution would be using a flexbox
for the form. 我更喜欢的解决方案是将
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>
The problem is simple : you put a div
around the input and the button! 问题很简单:您在输入和按钮周围放置了一个
div
! the div is a block element (display is block ) so automatically it will go under the previous element! div是一个块元素(display是block),所以它会自动进入上一个元素!
Solution there are many solutions ! 解决方案有很多解决方案!
remove the div ! 删除div! (if you don't need it)
(如果您不需要它)
use flex box 使用弹性盒
you could make your div display to an inline-block
or inline element
! 您可以使div显示为
inline-block
或inline element
!
Codes: 代码:
-removing the div:(change only HTML) -删除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>
-second solution: adding flex to CSS,just add this to you css: he is a link: Flex Box 第二种解决方案:将flex添加到CSS,只需将其添加到您的CSS中:他是一个链接: Flex Box
form{ /* it means all the elements inside form will be set one next to one */
display:flex;
}
-third solution :changing the display of the div;add this code to the css 第三种解决方案:更改div的显示;将此代码添加到CSS
.tnp-field ,.tnp-field {
display:inline-block;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.